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;
 animation-delay: 1s;
 padding: 20px 0;
 width: 90px;
}
</style>

<h4>Example simple CSS animation</h4>

<div id='anim_ex1'>HTML Div</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;
 animation-delay: 1s;
 padding: 20px 0;
 width: 90px;
}
</style>

<h4>Example CSS animation with four steps</h4>

<div id='anim_ex2'>HTML Div</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 2 second (delay 2) 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: 2s;
 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>

<h4>Example CSS animation-fill-mode: forwards</h4>

<div id='anim_ex3'>HTML Div</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: 1s;
 animation-fill-mode: forwards;
 animation-timing-function: linear;
 background-color: #0000da;
 content: ' ';
 display: block;
 margin: 0;
 position: absolute;
 top: 25%;
}
</style>

<h4>Example CSS animation to pseudo-elements</h4>
<p>Position the mouse over the red square.</p>

<div id='anim_pse'>Hello Sir</div>

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. Triangles with CSS (2198)
  2. CSS3 transition (1404)
  3. Register and show online users and visitors (25030)
  4. JavaScript code and PHP (21276)
  5. Get Attribute (ID, Class, Name, Title, Src) with jQuery (54769)

Popular pages this month

  1. Insert, Select and Update NULL value in MySQL (587)
  2. Read Excel file data in PHP - PhpExcelReader (518)
  3. PhpSpreadsheet - Read, Write Excel and LibreOffice Calc files (492)
  4. Get Attribute (ID, Class, Name, Title, Src) with jQuery (420)
  5. PHP getElementById and getElementsByTagName (351)