Syntax error Example of key frames with left animation using CSS3

Example of key frames with left animation using CSS3

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>
Updated on: 2020-06-21T05:26:43+05:30

139 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements