Css Course


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 type of <input> creates a date input control, such as a pop-up calendar?
type="text" type="date" type="button"
<input type="date" name="set_date" value="2012-10-15" />
Which CSS property adds shadow effects to the text of an element?
font-style color text-shadow
h2 {
  text-shadow: 2px 3px 3px #a0a1fe;
}
Click on the function that adds new elements to the end of an array.
pop() shift() push()
var pags = ["lessons", "courses"];
pags.push("download", "tutorials");
alert(pags[2]);            // download
Which function sorts an array by key, in ascending order, maintaining key to data correlations?
asort() ksort() sort()
$lang =[10=>"PHP", 20=>"JavaScript", "site"=>"coursesweb.net");
ksort($lang);
var_export($lang);     // array ("site"=>"coursesweb.net", 10=>"PHP", 20=>"JavaScript")
Animation of HTML elements with CSS

Last accessed pages

  1. Viewing the Flash Window (2386)
  2. SHA256 Encrypt hash in JavaScript (19647)
  3. Align DIVs on the same line (3069)
  4. PuzzleImg - Script to Create Image Puzzle Game (7088)
  5. Follow the mouse cursor with a DIV inside a Parent (6084)

Popular pages this month

  1. PHP Unzipper - Extract Zip, Rar Archives (220)
  2. Courses Web: PHP-MySQL JavaScript Node.js Ajax HTML CSS (211)
  3. Read Excel file data in PHP - PhpExcelReader (209)
  4. PHP-MySQL free course, online tutorials PHP MySQL code (136)
  5. SHA256 Encrypt hash in JavaScript (134)