The animation property, or its sub-properties can be used to animate other CSS properties such as color, background-color, height, or width of HTML elements.


Creating Animations with CSS

To use CSS animation, you must first define keyframes with a name for the animation, using the @keyframes rule, which holds what styles the element will have at certain times.
Then, you must bind the animation property (or its sub-properties) to a HTML element, using the same name.

- The following example binds the "ex1_anim" animation to the "#anim_ex1" element. The animation will last for 4 seconds from start to end (0% to 100%), and it will gradually change the margin-left of the #anim_ex1 from "0" to "80%". This effect will move that <div> from left to right.
<style>
 /* The animation code */
@keyframes ex1_anim {
 0% { margin-left: 0;}
 100% { margin-left: 80%;}
}

/* The element to apply the animation to */
#anim_ex1 {
 animation-name: ex1_anim;
 animation-duration: 4s;
 background-color: red;
 padding: 20px 0;
 width: 90px;
}
</style>

<div id='anim_ex1'>HTML Div</div>
- Demo:
- Click on this button: to see the result of the code above.
HTML Div

If the animation-duration property is not specified, the animation will not occur, because the default value is 0s (0 seconds).


CSS Animations - multiple steps

In the example above, the "@keyframes ex1_anim" animation has defined two steps: 0% is the beginning of the animation and 100% is the end.
You can add as many steps (style changes) as you like.

- The following example has four steps for the animation (0%, 30%, 55, 100%) that set various CSS properties to gradually transform, rotate, change the background and move the element.
<style>
@keyframes ex2_anim {
 0% { margin-left: 0;}
 30% {
 border-radius: 100%;
 transform: scale(1.5);
 }
 55% {
 transform: rotate(180deg);
 }
 100% {
 background-color: #0000e0;
 margin-left: 85%;
 transform: rotate(360deg);
 }
}

#anim_ex2 {
 animation-name: ex2_anim;
 animation-duration: 4s;
 background-color: red;
 padding: 20px 0;
 width: 90px;
}
</style>

<div id='anim_ex2'>HTML Div</div>
- Demo:
- Click on this button: to see the result of the code above.
HTML Div

CSS animation sub-properties

There are more sub-properties that can be used to configure the CSS animations. Below there is a list with these sub-properties.

- Here is an example with some of them. The animation starts after 1 second (delay 1) and it is played 3 time, "alternate" (forwards first, then backwards), and "linear" (with the same speed from start to end).
When the animation ends, the element remains in the forwards position (the style defined to the last step, 100%): animation-fill-mode: forwards;.
<style>
@keyframes ex3_anim {
 0% { margin-left: 0;}
 50% {
 transform: scale(.8);
 transform: rotate(225deg);
 }
 100% {
 background-color: #5588ed;
 border-radius: 100%;
 margin-left: 85%;
 transform: rotate(450deg);
 }
}

#anim_ex3 {
 animation-name: ex3_anim;
 animation-duration: 2.5s;
 animation-delay: 1s;
 animation-direction: alternate;
 animation-iteration-count: 3;
 animation-fill-mode: forwards;
 animation-play-state: running; 
 animation-timing-function: linear;
 background-color: red;
 padding: 20px 0;
 width: 80px;
}
</style>

<div id='anim_ex3'>HTML Div</div>
- Demo:
- Click on this button: to see the result.
HTML Div

Sub-properties of the animation property


CSS Animation to pseudo-classes and pseudo-elements

Animations with CSS can be created to pseudo-elements (:before, :after), and can be applied to pseudo-classes (like :hover).
- Example, when the mouse is over the #anim_pse element, it is created a pseudo-element with ":after", which will be animated.
<style>
@keyframes pse_anim {
 0% {
  left: 50%;
  height:0;
  width: 0;
 }
 50% {
  transform: rotate(180deg);
 }
 100% {
  border-radius: 100%;
  transform: rotate(360deg);
  left: 250px;
  height: 40px;
  width: 40px;
 }
}

#anim_pse {
 position: relative;
 text-align:center;
 padding:20px 0;
 width: 90px;
 background-color: red;
}

#anim_pse:hover:after {
 animation-name: pse_anim;
 animation-duration: 2s;
 animation-fill-mode: forwards;
 animation-timing-function: linear;
 background-color: #0000da;
 content: ' ';
 display: block;
 margin: 0;
 position: absolute;
 top: 25%;
}
</style>

Position  the mouse over the red square.
<div id="anim_pse">Hello Sir</div>
Demo:
Position the mouse over the red square.
Hello Sir

Shorthand animation property

For advanced developers, you can use the shorthand animation property to set the values of multiple sub-properties in one CSS property.
- The example below uses six of the animation properties:
#elm_id {
 animation-name: example;
 animation-duration: 4s;
 animation-timing-function: linear;
 animation-delay: 2s;
 animation-iteration-count: infinite;
 animation-direction: alternate;
}
- The same animation effect can be achieved by using the shorthand animation property:
#elm_id {
 animation: example 4s linear 2s infinite alternate;
}

You can use CSS to animate various properties: "background-color, height, margin, opacity, padding, transform, width", and others.
MDN has a list of Animatable CSS properties which can be animated.

References

- W3Schools: CSS Animations
- CSS-Tricks: Animation with CSS

Daily Test with Code Example

HTML
CSS
JavaScript
PHP-MySQL
Which meta tag provides a short description of the page?
<meta content="..."> <meta description="..."> <meta http-equiv="...">
<meta name="description" content="70-160 characters that describes the content of the page" />
Which CSS property is used to stop the wrapping effect of the "float"?
clear text-align position
#some_id {
  clear: both;
}
Click on the method which gets an array with all the elements in the document that have a specified tag name.
getElementsByName() getElementById() getElementsByTagName()
var divs = document.getElementsByTagName("div");
var nr_divs = divs.length;
alert(nr_divs);
Indicate the PHP function which returns the number of elements in array.
is_[) count() strlen()
$arr =[7, 8, "abc", 10);
$nri = count($arr);
echo $nri;        // 4
Animation of HTML elements with CSS

Last accessed pages

  1. Register and show online users and visitors (22722)
  2. Pagination Class - Script to paginate content (1618)
  3. PHP PDO - exec (INSERT, UPDATE, DELETE) MySQL (41518)
  4. The Stage, Panels and Tools in Flash (6329)
  5. Highlight Images on click (3268)

Popular pages this month

  1. Read Excel file data in PHP - PhpExcelReader (341)
  2. PhpSpreadsheet - Read, Write Excel and LibreOffice Calc files (281)
  3. Register and show online users and visitors (264)
  4. Courses Web: PHP-MySQL JavaScript Ajax HTML CSS Flash-AS3 (258)
  5. Insert, Select and Update NULL value in MySQL (162)