Lock Icon shake Animation CSS HTML

Salow
January 2, 2022
CSS

The lock icon appears when the screen is locked. Have you ever wondered how to create it using CSS and add a shaking animation. In this tutorial we design the lock symbol and shake animation.

Following is the CSS Class for Lock Icon Symbol.

.lock {
  font-size: 8px;
  position: relative;
  width: 18em;
  height: 13em;
  border-radius: 2em;
  top: 10em;
  box-sizing: border-box;
  border: 3.5em solid white;
  border-right-width: 7.5em;
  border-left-width: 7.5em;
  margin: 0 0 6rem 0;
}
.lock:before {
  content: "";
  box-sizing: border-box;
  position: absolute;
  border: 2.5em solid white;
  width: 14em;
  height: 12em;
  left: 50%;
  margin-left: -7em;
  top: -12em;
  border-top-left-radius: 7em;
  border-top-right-radius: 7em;
}
.lock:after {
  content: "";
  box-sizing: border-box;
  position: absolute;
  border: 1em solid gainsboro;
  width: 5em;
  height: 8em;
  border-radius: 2.5em;
  left: 50%;
  top: -1em;
  margin-left: -2.5em;
}

The above code creates a static output:

The following code is to add animation to the Yin Yang symbol. We will try to spin the symbol. Shake animation vibrate on animation.

@keyframes shake {
  10%,
  90% {
    transform: translate(-1px, 0);
  }

  20%,
  80% {
    transform: translate(4px, 0);
  }

  30%,
  50%,
  70% {
    transform: translate(-8px, 0);
  }

  40%,
  60% {
    transform: translate(8px, 0);
  }
}

Below is the Lock icon animation

You can find the complete coding in Visual Studio Code tutorial in the following YouTube Video.

Here is the complete code for creating Lock animation with CSS animation using HTML and CSS:

<!DOCTYPE html>
<html lang="en">
  <head>
    <style>
      .lock {
        font-size: 8px;
        position: relative;
        width: 18em;
        height: 13em;
        border-radius: 2em;
        top: 10em;
        box-sizing: border-box;
        border: 3.5em solid white;
        border-right-width: 7.5em;
        border-left-width: 7.5em;
        margin: 0 0 6rem 0;
        animation: shake 2s linear infinite;
      }
      .lock:before {
        content: "";
        box-sizing: border-box;
        position: absolute;
        border: 2.5em solid white;
        width: 14em;
        height: 12em;
        left: 50%;
        margin-left: -7em;
        top: -12em;
        border-top-left-radius: 7em;
        border-top-right-radius: 7em;
      }
      .lock:after {
        content: "";
        box-sizing: border-box;
        position: absolute;
        border: 1em solid gainsboro;
        width: 5em;
        height: 8em;
        border-radius: 2.5em;
        left: 50%;
        top: -1em;
        margin-left: -2.5em;
      }
      @keyframes shake {
        10%,
        90% {
          transform: translate(-1px, 0);
        }

        20%,
        80% {
          transform: translate(4px, 0);
        }

        30%,
        50%,
        70% {
          transform: translate(-8px, 0);
        }

        40%,
        60% {
          transform: translate(8px, 0);
        }
      }
    </style>
    <title>Salow Studios</title>
  </head>
  <body>
    <h1 class="h1">Lock Animation</h1>
    <div class="lock"></div>
  </body>
</html>

Thank you for reading. I hope that it has helped you with your project. Good luck and happy coding!

See you in another tutorial!