CSS animation
CSS Tutorial » CSS animation
Study in this chapter:
1. - How can add and change animation in CSS?
2. - css animation keyframes
3. - css animation delay, rotate
"CSS animations is a proposed module for CSS that allows the animation of HTML document elements using CSS." - First published: 20 March 2009
What are CSS animations?
An animation in CSS allows an item to gradually change in different styles.
You can change as many CSS properties as you need, and as many times as you need.
Using CSS animation, first, you need to specify some keyframes for the animation.
Keyframes hold what styles the element will have at certain times.
- @keyframes
- animation-name
- animation-duration
- animation-delay
- animation-iteration-count
- animation-direction
- animation-timing-function
- animation-fill-mode
- animation
Internal Style - by using a <style> element in the <head> section
External Style - by using an external CSS file as style.css
Syntax:
animation-name: value;
animation-duration: value;
animation-delay: value;
animation-iteration-count: value;
animation-direction: value;
animation-timing-function: value;
animation-fill-mode: value;
animation: value;
Example:
Browser Support
| Element |  Chrome |
 IE |
 Firefox |
 Opera |
 Safari |
| animation | Yes | Yes | Yes | Yes | Yes |
Delay an Animation
To delay the start of an animation, we use the animation-delay property
For the following example we can apply a delay in execution for 1 second before starting the animation:
For items o text animation, negative values are allowed. When we are using negative values, the animation will start as if it had already played for x seconds.
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background-color: red;
position: relative;
animation-name: nice-example;
animation-duration: 8s;
animation-delay: 1s;
}@keyframes nice-example {
0% {background-color:red; left:0px; top:0px;}
80% {background-color:yellow; left:400px; top:0px;}
}
</style>
</head>
<body><h1>CSS Animation</h1>
<p>The animation-delay property specifies a delay for the start of an animation.</p>
<div></div>
</body>
</html>
Related subjects:
Table Size width and height
Border Style
border width
Run Animation in Reverse Direction
The animation-direction: property can play an animation: forward, backward, or alternating cycles.
Values for animation-direction property:
- normal - is default
- reverse - played backwards
- alternate - played forwards first, then backwards
- alternate-reverse - played backwards first, then forwards
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background-color: red;
position: relative;
animation-name: nice-example;
animation-duration: 8s;
animation-direction: reverse;
}@keyframes nice-example {
0% {background-color:red; left:0px; top:0px;}
80% {background-color:yellow; left:400px; top:0px;}
}
</style>
</head>
<body><h1>CSS Animation</h1>
<p> The following example will run the animation in reverse direction (backwards):</p>
<div></div>
</body>
</html>
Tags: animation delay, rotate, shorthand, loop, stop at end, keyframes, library
Last style values set of the animation ends
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background: red;
position: relative;
animation-name: nice-example;
animation-duration: 3s;
animation-fill-mode: forwards;
}@keyframes nice-example {
from {top: 0px;}
to {top: 200px; background-color: blue;}
}
</style>
</head>
<body><h1>CSS Animation</h1>
<p>Let the div element retain the style values set by the last keyframe when the animation ends:</p>
<div></div>
</body>
</html>
Summary of description
CSS animation examples: delay, rotate, shorthand, loop, stop at end, keyframes
CSS animation examples: delay, rotate, shorthand, loop, stop at end, keyframes - css tutorial
This tool makes it easy to create, adjust, and experiment with custom colors for the web.
Magnews2 is a modern and creative free magazine and news website template that will help you kick off your online project in style.
Find here examples of creative and unique website layouts.
Find here examples of creative and unique website CSS HTML menu.