When creating websites, it is important to understand how to attract people to your websites, and how to keep people interested in staying on your website. Animations are great tools to attract individuals to your website. CSS3 utilizes familiar CCS code to introduce a lot of graphical design options to webpages. CSS3 has the ability to code animation with most HTML elements within your style sheets, so you do not have to rely on flash or javascript.
The way CSS3 animates is using keyframes that have specific styles that affect an element at certain times. For example, you have to first bind the animation to an element, and for this example, we have an element id called 'square1'. With that square we tied the animation of changing the background color from red to yellow, as seen below. The source code is also below. (If you don't see the animation, refresh the page with F5). The animation duration is how long it will take for the entire animation to complete. For this example, it was 4 seconds.
#square1{
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;
}
@keyframes example {
from {background-color: red;}
to {background-color: yellow;}
}
The next example I have below is a similar animation to the previous example, except it does not run the animation once, it runs the animation for however many times I have set the animation-iteration-count. The count determines how many times the animation will run. For the example below, I have set the animation of turning the box from yellow to red to run 3 times.
#square2 {
width: 100px;
height: 100px;
background-color: red;
position: relative;
-webkit-animation-name: example; /* Safari 4.0 - 8.0 */
-webkit-animation-duration: 4s; /* Safari 4.0 - 8.0 */
-webkit-animation-iteration-count: 3; /* Safari 4.0 - 8.0 */
animation-name: example;
animation-duration: 4s;
animation-iteration-count: 3;
}