CSS3 Animation

Animation is process of making shape changes and creating motions with elements.

@keyframes

Keyframes will control the intermediate animation steps in CSS3.

   of key frames with left animation

@keyframes animation {

   from {background-color: pink;}

   to {background-color: green;}

}

div {

   width: 100px;

   height: 100px;

   background-color: red;

   animation-name: animation;

   animation-duration: 5s;

}

The above    shows height, width, color, name and duration of animation with keyframes syntax

Moving left animation

<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>  Example Point</h1>

      <p>this is an    of moving left animation .</p>

              <button onclick="myFunction()">Reload page</button>

      <script>

           function myFunction() {

           location.reload();

           }

      </script>

   </body>

</html>

It will produce the following result –

  Example Point

this is an    of moving left animation .

Reload page

Moving left animation with keyframes

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

            }

            75% {

               font-size:300%;

               margin-left:25%;

               width:150%;

            }

            to {

               margin-left:0%;

               width:100%;

            }

         }

         @-webkit-keyframes slidein {

            from {

               margin-left:100%;

               width:300%

            }

            75% {

               font-size:300%;

               margin-left:25%;

               width:150%;

            }

            to {

               margin-left:0%;

               width:100%;

            }

         }

      </style>

     

   </head>

   <body>

      <h1>  Example Point</h1>

     

      <p>This is an    of animation left with an extra keyframe to make text changes.</p>

              <button onclick="myFunction()">Reload page</button>

      <script>

           function myFunction() {

           location.reload();

           }

      </script>

   </body>

</html>

It will produce the following result −

  Example Point

This is an    of animation left with an extra keyframe to make text changes.

Reload page