CSS @keyframes Examples

Last updated on June 14, 2021 A Goodman Loading... Post a comment

This article walks you through a couple of different examples of using @keyframes to create animation in CSS.

Example 1: The Moving Box

This example will create a box that moves in a rectangular orbit. Besides the change in position, the size and color of the box also change.

Preview:

The code:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Kindacode.com</title>
    <style>
      .box {
        width: 100px;
        height: 100px;
        background: red;
        position: absolute;
        animation: move 5s infinite;
      }

      @keyframes move {
        0% {
          top: 0px;
          left: 0px;
          background: red;
          width: 100px;
          height: 100px;
        }
        25% {
          top: 0px;
          left: 300px;
          background: orange;
          width: 200px;
          height: 100px;
        }
        50% {
          top: 300px;
          left: 300px;
          background: yellow;
          width: 100px;
          height: 200px;
        }
        75% {
          top: 300px;
          left: 0px;
          background: green;
          width: 200px;
          height: 200px;
        }
        100% {
          top: 0px;
          left: 0px;
          background: red;
          width: 100px;
          height: 100px;
        }
      }
    </style>
  </head>
  <body>
    <div class="box"></div>
  </body>
</html>

Example 2: Spinning Animation

Preview:

The code:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Kindacode.com</title>
    <style>
      .box {
        margin: 100px auto;
        width: 100px;
        height: 300px;
        background: purple;
        animation: spin 2s infinite;
      }

      @keyframes spin {
        from {
          transform: rotate(0deg);
        }
        to {
          transform: rotate(360deg);
        }
      }
    </style>
  </head>
  <body>
    <div class="box"></div>
  </body>
</html>

Example 3: Loading Placeholder (Skeleton)

Content loading placeholder used to take the place when the content is being loaded. You can see them appear on many famous platforms such as Facebook, Youtube, Netflix, Reddit, Quora, etc.

Preview:

The code:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Kindacode.com</title>

    <style>
      @keyframes loading {
        0% {
          background-position: -500px 0;
        }
        100% {
          background-position: 500px 0;
        }
      }

      .content {
        margin: 50px auto;
        max-width: 500px;
      }

      .placeholder {
        margin-bottom: 10px;

        animation-duration: 1.25s;
        animation-fill-mode: forwards;
        animation-iteration-count: infinite;
        animation-name: loading;
        animation-timing-function: linear;

        background: linear-gradient(
          to right,
          #eeeeee 10%,
          #dddddd 18%,
          #eeeeee 33%
        );
        background-size: 1000px 104px;
        height: 24px;
        position: relative;
      }
    </style>
    
  </head>
  <body>
    <div class="content">
      <div class="placeholder"></div>
      <div class="placeholder"></div>
      <div class="placeholder"></div>
      <div class="placeholder"></div>
      <div class="placeholder"></div>
    </div>
  </body>
</html>

Conclusion

We’ve gone over a few examples of using @keyframes to create animation in CSS. If you’d like to learn more new and interesting stuff about frontend development, take a look at the following articles:

You can also check out our CSS category page for the latest tutorials and examples.

Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments

Related Articles