Animation of HTML elements with CSS

Css Course

• CSS Animations - multiple steps
• CSS animation sub-properties
• CSS Animation to pseudo-classes and pseudo-elements
• Shorthand animation property

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

<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.

<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

<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

• animation-delay - tthe delay between the time the element is loaded and the beginning of the animation sequence; number of seconds or milliseconds (Xs, Xms).
• animation-direction - configures whether an animation should be played forwards, backwards or in alternate cycles.
  Values: reverse, alternate, alternate-reverse, normal (default).
• animation-duration - the length of time it takes for an animation to complete one cycle; number of seconds or milliseconds (Xs, Xms).
• animation-fill-mode - specifies a style for the element when the animation is not playing (before it starts, after it ends, or both).
  Values: forwards, backwards, both, none (default).
• animation-iteration-count - the number of times the animation should be performed (default 1).
• animation-name - specifies the name of the @keyframes animation.
• animation-play-state - lets you pause and resume the animation sequence.
  Values: paused, running (default).
• animation-timing-function - specifies the acceleration curve of the animation.
  • linear - the animation has the same speed from start to end.
  • ease - the animation has a slow start, then fast, before it ends slowly (default).
  • ease-in - slow start.
  • ease-out - slow end.
  • ease-in-out - both a slow start and a slow end.
  • cubic-bezier(x1, y1, x2, y2) - define your own values in the cubic-bezier function.
    Possible values are numeric values from 0 to 1 (e.g. cubic-bezier(0.5, 0.2, 0.3, 1.0)).

CSS Animation to pseudo-classes and pseudo-elements

<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

#elm_id {
 animation-name: example;
 animation-duration: 4s;
 animation-timing-function: linear;
 animation-delay: 2s;
 animation-iteration-count: infinite;
 animation-direction: alternate;
}

#elm_id {
 animation: example 4s linear 2s infinite alternate;
}

References