Example of key frames with left animation using CSS3

CSSWeb DevelopmentFront End Technology

The following example shows height, width, color, name, and duration of animation with keyframes syntax −

Example

Live Demo

<html>
   <head>
      <style type = "text/css">
         h1 {
            -moz-animation-duration: 3s;
            -webkit-animation-duration: 3s;
            -moz-animation-name: slidein;
            -webkit-animation-name: slidein;
         }
         @-moz-keyframes slidein {
            from {
               margin-left:100%; width:300%
            }
            to {
               margin-left:0%; width:100%;
            }
         }
         @-webkit-keyframes slidein {
            from {
               margin-left:100%; width:300%
            }
            to {
               margin-left:0%; width:100%;
            }
          }
      </style>
   </head>
   <body>
      <h1>Tutorials Point</h1>
      <p>this is an example of moving left animation .</p>
      <button onclick = "myFunction()">Reload page</button>
      <script> function myFunction() { location.reload(); } </script>
   </body>
</html>
raja
Published on 02-May-2018 16:24:30
Advertisements