Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • How does CSS3 @keyframe Animation Work?

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 512
    Comment on it

    The @keyframes property specifies animation code. To use CSS3 animation we need to understand @keyframe property.
    This @keyframe property enables user to do multiple transition on the same property which is later performed in continuous sequence. This animation can be run infinite number of time but a user can resume or pause animation as according to his requirement. Basically a simple animation have just two keyframes i.e Start and End, while the complex animation have multiple keyframes.


    CSS Syntax:

    <style>
     @keyframes'name'{
     keyframe{property:value;}
     }
    </style>

    Source Code:

    <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>
    
    

      For Output:

    User can go through this link https://jsfiddle.net/mvfesh8m/

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: