Intro to CSS3 Animations

 

 

CSS3 animations creates the ability for an element to gradually change from one style to another, and visually display the animated steps.
You can change an unlimited amount of CSS properties, as many times as you would like.
To create a CSS3 animation, you must simply specify some keyframes for the animation.
Keyframes hold what styles the element will have at certain times.

@keyframes Rule

To get an animation to work, you must bind the animation to an element.
The following example binds the “animation” animation to the div class=”color-change” element. The animation will lasts for 2.5 seconds, and it will gradually change the background-color of the div element from “red” to “yellow”, and change the width and height from 1px to 100px:

 

div.color-change {
    width: 100px;
    height: 100px;
    position: relative;
    border-radius: 50px;
    background-color: yellow;
    -webkit-animation-name: animation; /* Chrome, Safari, Opera */
    -webkit-animation-duration: 2.5s; /* Chrome, Safari, Opera */
    animation-name: animation;
    animation-duration: 2.5s;
     -webkit-animation-iteration-count: infinite;  /* Chrome, Safari, Opera */
    animation-iteration-count: infinite;
}

/* Chrome, Safari, Opera */
@-webkit-keyframes animation {
    from {background-color: red; width: 1px; height: 1px; left:50px; top:50px}
    to {background-color: yellow; width: 100px; height: 100px; left:0px; top:0px;}
    
}

/* Standard syntax */
@keyframes animation {
    from {background-color: red; width: 1px; height: 1px; left:50px; top:50px}
    to {background-color: yellow; width: 100px; height: 100px; left:0px; top:0px;}
}

Note: CSS3 animations allows animation of the majority of HTML elements without using JavaScript or Flash!

 

Tags:

We will be happy to hear your thoughts

      Leave a Comment

      Web Training Guides
      Compare items
      • Total (0)
      Compare
      0