Swing Animation Effect with CSS


The swing animation effect move or cause to move back and forth or from side to side while suspended or on an axis to an element.

Example

Live Demo

<html>
   <head>
      <style>
         .animated {
            background-image: url(/css/images/logo.png);
            background-repeat: no-repeat;
            background-position: left top;
            padding-top:95px;
            margin-bottom:60px;
            -webkit-animation-duration: 10s;
            animation-duration: 10s;
            -webkit-animation-fill-mode: both;
            animation-fill-mode: both;
         }

         @-webkit-keyframes swing {
            20%, 40%, 60%, 80%, 100% { -webkit-transform-origin: top center; }
            20% { -webkit-transform: rotate(15deg); }
            40% { -webkit-transform: rotate(-10deg); }
            60% { -webkit-transform: rotate(5deg); }
            80% { -webkit-transform: rotate(-5deg); }
            100% { -webkit-transform: rotate(0deg); }
         }

         @keyframes swing {
            20% { transform: rotate(15deg); }
            40% { transform: rotate(-10deg); }
            60% { transform: rotate(5deg); }
            80% { transform: rotate(-5deg); }
            100% { transform: rotate(0deg); }
         }

         .swing {
            -webkit-transform-origin: top center;
            transform-origin: top center;
            -webkit-animation-name: swing;
            animation-name: swing;
         }
      </style>

   </head>
   <body>

      <div id = "animated-example" class = "animated swing"></div>
      <button onclick = "myFunction()">Reload page</button>

      <script>
         function myFunction() {
            location.reload();
         }
      </script>
   </body>
</html>
Samual Sam
Samual Sam

Learning faster. Every day.


Advertisements