CSS Animation

CSS allows the animation of HTML elements without using JavaScript.

CSS animations make it possible to animate transitions from one CSS style configuration to another. Animations consist of two components, a style describing the CSS animation and a set of keyframes that indicate the start and end states of the animation’s style, as well as possible intermediate waypoints.

Properties:

  • @keyframes

  • animation-name

  • animation-duration

  • animation-delay

  • animation-iteration-count

  • animation-direction

  • animation-timing-function

  • animation-fill-mode

  • animation

 

Ex. 1

<!DOCTYPE html>

<html>

<head>

<style>

      div {

              width: 100px;

              height: 100px;

              background-color: red;

              -webkit-animation-name: example; /* Safari 4.0 - 8.0 */

              -webkit-animation-duration: 4s; /* Safari 4.0 - 8.0 */

               animation-name: example;

               animation-duration: 4s;

  }

 

     /* Safari 4.0 - 8.0 */

             @-webkit-keyframes example {

             0%   {background-color: red;}

             25%  {background-color: yellow;}

             50%  {background-color: blue;}

             100% {background-color: green;}

  }

 

          /* Standard syntax */

           @keyframes example {

           0%   {background-color: red;}

           25%  {background-color: yellow;}

           50%  {background-color: blue;}

           100% {background-color: green;}

 }

</style>

</head>

        <body>

 

              <p><b>Note:</b> This example does not work in Internet Explorer 9 and earlier versions.</p>

 

         </body>

</div>

</html>

Ex. 2

Move text from left to right.

<!DOCTYPE html>

<html>

<head>

<style>

      p {

           animation-duration: 3s;

           animation-name: slidein;

 }

          @keyframes slidein {

       from {

                    margin-left: 100%;

                    width: 300%;

  }

 

        to {

                    margin-left: 0%;

                     width: 100%;

  }

 }

</style>

</head>

       <body>

           <p>The Caterpillar and Alice looked at each other for some time in silence: at last the Caterpillar took the hookah out of its mouth, and addressed her in a languid, sleepy voice.</p>

        </body>

</html>

Powered  by Codersarts