CSS animation

Using from and to.

Hi, the purpose of this page ia to teach you about animations in CSS.

CSS animation allows for html elements to be animated without using Javascript.

example

To get the above example you need to set up keyframrs as shown in the following code snippet.


               @keyframes example{

 from{

 color:
 green; 
                           
 background-color:
       green;
  
  } 

                 to{

   color:
  white;

  background-color:
  
        black;
        

    }

}


                   .class{
Animation-name: example;

Animation-duration:4s;

Animation-iteration-count:infinite;
 
                   }

You will also need to attach this class to your element

<DIV CLASS= "class" > example < /DIV>

Using percentags

You can also use percentages instead of "to" and "from".This allows for more stages in the animation

second example using %

Now lets look at the code behind this example. The only charging ocurrs when defining the keyframes. These changes can be seen below.


               @keyframes secondexample{

    0%{

colir:
        green;  
                          
background-color: green;
 
    } 
 
    50%
    {
 
    color:
        white;
 
  background-color: black;
 
    }
 
   100%
  {
 
    color:
   color green;
 
 background-color:
    green;
 
    }
 
}

Exstended support.

In order to support some versions of the safari browser you will need to use -webkit- that means you woll need a second version of the keyframes and animation-properties.

@keyframes example{

...

}

                    @-webkit-keyframes example{

                        ...

                    }

.class{}
-webkit-animation-name: example;
animation-name: example;
-webkit-animation-duration: 4s;
animation-duration: 4s;
-webkit-animation-iteration-count: infinate;
animation-iteration-count: infinite;
}

Additional reading from the community

Click here for a link by Brian G on "Javascript animation API".

Welcome!

Using from and to.

Using percentags

Exstended support.

Additional reading from the community

CSS animation lesson