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 tag create a highlighted bolded text?
<q> <strong> <em>
<p>Address: <strong>http://CoursesWeb.net/</strong> - Tutorials.</p>
Which of these CSS codes displays the text bolded?
text-size: 18px; font-style: italic; font-weight: 800;
#id {
  font-weight: 800;
}
What JavaScript function can be used to call another function multiple times, to a specified time interval?
setInterval() setTimeout() push()
function someFunction() { alert("CoursesWeb.net"); }
setInterval("someFunction()", 2000);
Click on the correctly defined variable in PHP.
var vname = 8; $vname = 8; $vname == 8;
$vname = 8;
echo $vname;
Animation of HTML elements with CSS

Last accessed pages

  1. CSS Course - Free lessons (8665)
  2. JavaScript Trivia Game (5661)
  3. Insert, Select and Update NULL value in MySQL (27473)
  4. Recursive function to create Multi-Level Menu in PHP (7048)
  5. Register and show online users and visitors (24028)

Popular pages this month

  1. Read Excel file data in PHP - PhpExcelReader (575)
  2. PhpSpreadsheet - Read, Write Excel and LibreOffice Calc files (498)
  3. Register and show online users and visitors (415)
  4. Get Attribute (ID, Class, Name, Title, Src) with jQuery (402)
  5. Courses Web: PHP-MySQL JavaScript Node.js Ajax HTML CSS (375)