Animated Lock Opening - Fixed

animated-lock-opening-fixed.markdown

Animated Lock Opening - Fixed

A Pen by Danny Brown on CodePen.

License.

index.html

<section class="container">
    <svg class="lock-top" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 111 114" style="enable-background:new 0 0 111 114;" xml:space="preserve">
    <path fill="none" stroke="#FFF" stroke-width="15"
          vector-effect="non-scaling-stroke"
          d="M 96 150
             L 96 68
             A 39.5 39.5 0 0 0 17 68
             L 17 96"/>
    </svg>
  
    <svg class="lock-circle" viewBox="0 0 106 106" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
        <!-- Generator: Sketch 39.1 (31720) - http://www.bohemiancoding.com/sketch -->
        <title>Group 15</title>
        <desc>Created with Sketch.</desc>
        <defs></defs>
        <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
            <g id="Group-15">
                <circle id="Oval-5" fill="#FF9B02" cx="53" cy="53" r="46"></circle>
                <path d="M94,53 C94,30.3563253 75.6436747,12 53,12 C30.3563253,12 12,30.3563253 12,53 C12,75.6436747 30.3563253,94 53,94 C75.6436747,94 94,75.6436747 94,53 Z M0,53 C0,23.7289083 23.7289083,0 53,0 C82.2710917,0 106,23.7289083 106,53 C106,82.2710917 82.2710917,106 53,106 C23.7289083,106 0,82.2710917 0,53 Z" id="Oval-3-Copy-3" fill="#FFFFFF"></path>
                <path d="M57.4689246,55.9401548 C57.4689246,55.9401548 60.2573091,67.465609 57.8052698,69.9773289 C56.1267058,71.6962068 49.8732942,71.6962068 48.1951254,69.9773289 C45.7426909,67.465609 48.5310754,55.9401548 48.5310754,55.9401548 C46.6556843,54.5635505 45.4367788,52.3992425 45.4367788,49.8934512 C45.4367788,45.7173958 48.8231542,42.3361585 53,42.3361585 C57.177241,42.3361585 60.5636164,45.7146292 60.5636164,49.8910798 C60.5636164,52.3956853 59.344711,54.5635505 57.4689246,55.9401548 M53,17 C33.1176923,17 17,33.117297 17,53 C17,72.8819125 33.1176923,89 53,89 C72.8819125,89 89,72.8819125 89,53 C89,33.117297 72.8819125,17 53,17" id="Fill-4-Copy-4" fill="#FFFFFF"></path>
            </g>
        </g>
    </svg>
</section>

script.js

$(".lock-circle").on("click", function(e){
    var $this = $(".lock-top path");
    if($this.hasClass("animated")){
        $this.removeClass("animated");
        $this.removeClass("customAnimation");
    }else{
        $this.addClass("animated customAnimation");
    }
});

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>

style.scss

body {
  background: #333;
}

.container { 
  width: 300px; 
  min-height: 50%;
  margin: 0 auto;
  background: #FF9B02;
 
  padding: 15px;
  position: relative;
}


svg { 
  display: block;
  position: relative;
}

.lock-top { 
  width: 80%;
  min-height: 290px;
  margin: 0 auto;
}

.lock-top path {
  transform: translateY(10px);
}

.lock-circle {
  width: 70%;
  margin: 0 auto;
  cursor: pointer;
}

.lock-top { top: 10px; right: 3px }
.lock-circle { top: -90px; }

/*******************************
 *          Animation
 ******************************/

.animated {
  animation-duration: 1.1s;
  animation-fill-mode: both;
}

@keyframes customAnimation {
  0% {
    transform: translateY(10px);
    visibility: visible;
  }
  20% {
    transform: translateY(13px);
  }
  25% {
    transform: translateY(13px);
  }
  40% {
    transform: translateY(-27px) rotateY(0);
    transform-origin: center right;
  }
  60% {
  }
  100% {
    transform: translateY(-20px) rotateY(180deg);
    transform-origin: center right;
  }
}

.customAnimation {
  animation-name: customAnimation;
}