Example of CSS @keyframes Property with transform property

Source Code: (back to article)

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      html,
      body {
        height: 90%;
      }
      .container {
        margin: 30px auto;
        min-width: 320px;
        max-width: 600px;
        height: 90%;
        overflow: hidden;
      }
      img {
        -webkit-transform-origin: left center;
        -ms-transform-origin: left center;
        transform-origin: left center;
        -webkit-animation: fall 5s infinite;
        animation: fall 5s infinite;
      }
      @-webkit-keyframes fall {
        from {
          -webkit-transform: rotate(0) translateX(0);
          transform: rotate(0) translateX(0);
          opacity: 1;
        }
        to {
          -webkit-transform: rotate(90deg) translateX(200px);
          transform: rotate(90deg) translateX(200px);
          opacity: 0.1;
        }
      }
      @keyframes fall {
        from {
          -webkit-transform: rotate(0) translateX(0);
          transform: rotate(0) translateX(0);
          opacity: 1;
        }
        to {
          -webkit-transform: rotate(90deg) translateX(200px);
          transform: rotate(90deg) translateX(200px);
          opacity: 0.1;
        }
      }
    </style>
  </head>
  <body>
    <h2>@keyframes example</h2>
    <div class="container">
      <img src="/build/images/w3docs-logo-black.png" alt="W3docs" width="150" height="50" />
    </div>
  </body>
</html>