TryIt Editor v2.0 - CSS-Eigenschaft @keyframes

Source Code: (back to article)

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</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 Beispiel</h2>
    <div class="container">
      <img src="/uploads/media/default/0001/01/0710cad7a1017902166203def268a0df2a5fd545.png" alt="W3docs" width="150" height="50"/>
    </div>
  </body>
</html>