unlock animation

by Max Kovalov

HTML

<svg id="locked_main_Layer_1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 80 80">
  <style>
    .locked_main_0{fill:#00b7f1}.locked_main_1{fill:#78dcff}.locked_main_2{fill:#fff}
  </style>
  <title>
    locked_main
  </title>
  <g id="locked_main_Layer_5">
    <path class="locked_main_0 locked_main_bg" d="M40 78.5C18.7 78.5 1.5 61.3 1.5 40S18.7 1.5 40 1.5 78.5 18.7 78.5 40 61.3 78.5 40 78.5z"/>
    <path class="locked_main_1 locked_main_stroke" d="M40 3c20.4 0 37 16.6 37 37S60.4 77 40 77 3 60.4 3 40 19.6 3 40 3m0-3C17.9 0 0 17.9 0 40s17.9 40 40 40 40-17.9 40-40S62.1 0 40 0z"/>
  </g>
  <path class="locked_main_2" d="M29.1 32.3h21.8c1.4 0 2.5 1.1 2.5 2.5v17c0 1.4-1.1 2.5-2.5 2.5H29.1c-1.4 0-2.5-1.1-2.5-2.5v-17c0-1.3 1.1-2.5 2.5-2.5zm17-5.4v3h3v-3c0-5-4.1-9.1-9.1-9.1s-9.1 4.1-9.1 9.1v3h3v-3c0-3.4 2.7-6.1 6.1-6.1 3.3 0 6 2.7 6.1 6.1z" id="locked_main_Layer_6"/>
</svg>

<svg id="unlocked_main_Layer_1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 80 80">
  <style>
    .unlocked_main_0{fill:#00b7f1}.unlocked_main_1{fill:#78dcff}.unlocked_main_2{fill:#fff}
  </style>
  <title>
    unlocked_main
  </title>
  <g id="unlocked_main_Layer_10">
    <path class="unlocked_main_0 unlocked_main_bg" d="M40 78.5C18.7 78.5 1.5 61.3 1.5 40S18.7 1.5 40 1.5 78.5 18.7 78.5 40 61.3 78.5 40 78.5z"/>
    <path class="unlocked_main_1 unlocked_main_stroke" d="M40 3c20.4 0 37 16.6 37 37S60.4 77 40 77 3 60.4 3 40c0-9.8 3.9-19.2 10.8-26.2C20.8 6.9 30.2 3 40 3m0-3C17.9 0 0 17.9 0 40s17.9 40 40 40 40-17.9 40-40S62.1 0 40 0z"/>
  </g>
  <path class="unlocked_main_1 unlocked_main_sun" d="M40 26.8c-.7 0-1.2-.5-1.2-1.2v-9.8c0-.7.5-1.2 1.2-1.2s1.2.5 1.2 1.2v9.7c0 .7-.5 1.3-1.2 1.3zm15.2 2.1c-.5 0-.9-.4-.9-.9 0-.2.1-.5.3-.7l4.1-4.1c.3-.4.9-.4 1.3-.1.4.3.4.9.1 1.3l-.1.1-4.1 4.1c-.2.2-.4.3-.7.3zm12.1 15.6h-9c-.7 0-1.2-.5-1.2-1.2s.5-1.2 1.2-1.2h9c.7 0 1.2.5 1.2 1.2s-.5 1.2-1.2 1.2zm-9.6 17.3c-.2 0-.5-.1-.7-.3l-3-3c-.4-.4-.4-.9 0-1.3s.9-.4 1.3 0l3 3c.4.4.4.9 0 1.3-.2.2-.4.3-.6.3zm-17.9 8.8c-.7...

CSS

body {
  background: #00b7f1;
}

svg {
  width: 60px;
  height: 60px;
}

@keyframes away_unlocked_main_sun {
  0% {
    opacity: 0;
    transform: scale(0);
  }
  20% {
    opacity: 0;
    transform: scale(0);
  }
  70% {
    opacity: 1;
    transform: scale(1.1);
  }
  80% {
    opacity: 0;
    transform: scale(1.2);
  }
}

@keyframes always_locked_main_bg_animation {
  0% {
    fill: #00b7f1;
  }
  70% {
    fill: #00b7f1;
  }
  80% {
    fill: rgb(226, 54, 30);
  }
  100% {
    fill: #00b7f1;
  }
}

@keyframes always_locked_main_stroke_animation {
  0% {
    opacity: 1;
  }
  70% {
    opacity: 1;
  }
  80% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes always_unlocked_main_bg_animation {
  0% {
    fill: #00b7f1;
  }
  70% {
    fill: #00b7f1;
  }
  80% {
    fill: rgb(2, 177, 87);
  }
  100% {
    fill: #00b7f1;
  }
}
@keyframes always_unlock_main_animation {
  0% {
    transform: rotateY(180deg);
  }
  40% {
    transform: rotateY(180deg);
  }
  70% {
    transform: rotateY(0deg);
  }
  100% {
    transform: rotateY(0deg);
  }
}



.locked_main_bg {
  animation: always_locked_main_bg_animation 1.5s .5s linear infinite;
}

.locked_main_stroke {
  animation: always_locked_main_stroke_animation 1.5s .5s linear infinite;
}

.unlocked_main_bg {
  animation: always_unlocked_main_bg_animation 1.5s 1s linear infinite;
}

.unlocked_main_stroke {
  animation: always_locked_main_stroke_animation 1.5s 1s linear infinite;
}
.unlocked_main_sun {
  opacity: 0;
  transform-origin: 50% 50%;
  animation: away_unlocked_main_sun 1.5s 1s linear infinite;
}
.unlocked_main_top {
   transform: rotateY(180deg);
   transform-origin: 92% 50%;
   animation: always_unlock_main_animation 1.5s 1s linear infinite;
}