CSS Animations Examples
In the first example code, the paragraph changes its color with time. At 0% completion, it is red, at 50% completion it is of orange color and at full completion i.e. at 100%, it is brown.
Example 1: This example describes the CSS Animation using the @keyframe rule.
<!DOCTYPE html>
<html>
<head>
<style>
#gfg {
animation-name: color;
animation-duration: 5s;
padding-top: 30px;
padding-bottom: 30px;
font-family: Times New Roman;
}
@keyframes color {
0% {
background-color: red;
}
50% {
background-color: orange;
}
100% {
background-color: brown;
}
}
</style>
</head>
<body>
<div id="gfg">
<h2>CSS Keyframes Animation</h2>
</div>
</body>
</html>
Output:
css animation example
Example 2: This example describes the CSS Animation Properties using the animation-timing-function property.
<!DOCTYPE html>
<html>
<head>
<style>
h2 {
width: 350px;
animation-name: text;
animation-duration: 4s;
animation-iteration-count: infinite;
background-color: rgb(255,210,85);
}
#one {
animation-timing-function: ease;
}
#two {
animation-timing-function: linear;
}
#three {
animation-timing-function: ease-in;
}
#four {
animation-timing-function: ease-out;
}
#five {
animation-timing-function: ease-in-out;
}
@keyframes text {
from {
margin-left: 60%;
}
to {
margin-left: 0%;
}
}
</style>
</head>
<body>
<h2 id="one">This text is ease.</h2>
<h2 id="two">This text is linear.</h2>
<h2 id="three">This text is ease-in.</h2>
<h2 id="four">This text is ease-out.</h2>
<h2 id="five">
This text is ease-in-out.
</h2>
</body>
</html>
Output:
css animation timing funtion
Example 3: This example describes the CSS Animation Properties using the animation-delay property.
<!DOCTYPE html>
<html>
<head>
<style>
#one {
animation-name: example;
animation-duration: 10s;
}
#two {
animation-name: example;
animation-duration: 10s;
animation-delay: 10s;
}
@keyframes example {
from {
background-color: orange;
}
to {
background-color: white;
}
}
</style>
</head>
<body>
<h2 id="one">Text animation without delayed.</h2>
<h2 id="two">Text animation with 10 second delay.</h2>
</body>
</html>
Output:
Example 4: This example describes the CSS Animation Properties using an animation-iteration-count property.
<!DOCTYPE html>
<html>
<head>
<style>
#one {
animation-name: example;
animation-duration: 2s;
animation-iteration-count: 2;
}
#two {
animation-name: example;
animation-duration: 2s;
animation-iteration-count: infinite;
}
@keyframes example {
from {
background-color: orange;
}
to {
background-color: white;
}
}
</style>
</head>
<body>
<h2 id="one">This text changes its color two times.</h2>
<h2 id="two">This text changes its color infinite times.</h2>
</body>
</html>
Output:
css animation iteration property
Example 5: This example describes the CSS Animation Properties using the animation-direction property.
<!DOCTYPE html>
<html>
<head>
<style>
h2 {
width: 100%;
animation-name: text;
animation-duration: 2s;
animation-iteration-count: infinite;
}
#one {
animation-direction: normal;
}
#two {
animation-direction: reverse;
}
#three {
animation-direction: alternate;
}
#four {
animation-direction: alternate-reverse;
}
@keyframes text {
from {
margin-left: 60%;
}
to {
margin-left: 0%;
}
}
</style>
</head>
<body>
<h2 id="one">This text is normal.</h2>
<h2 id="two">This text is reverse.</h2>
<h2 id="three">This text is alternate.</h2>
<h2 id="four">This text is alternate-reverse.</h2>
</body>
</html>
Output:
css animation direction property example
Example 6: This example describes the CSS Animation Properties using an animation-fill-mode property.
<!DOCTYPE html>
<html>
<head>
<style>
h2 {
width: 400px;
background-color: orange;
animation-name: text;
animation-duration: 3s;
}
#one {
animation-fill-mode: none;
}
#two {
animation-fill-mode: forwards;
}
#three {
animation-fill-mode: backwards;
animation-delay: 2s;
}
#four {
animation-fill-mode: both;
animation-delay: 2s;
}
@keyframes text {
from {
margin-left: 0%;
background-color: #aaaaaa;
}
to {
margin-left: 60%;
background-color: #008000;
}
}
</style>
</head>
<body>
<h2 id="one">none</h2>
<h2 id="two">forwards</h2>
<h2 id="three">backwards</h2>
<h2 id="four">both</h2>
</body>
</html>
Output:
css animation fill property
Supported Browsers: Following browsers support the CSS Animations
- Google Chrome 43.0
- Microsoft Edge 12.0
- Firefox 16.0
- Safari 9.0
- Opera 30.0
CSS Animations
CSS Animations are a powerful tool that allows you to control the motion and display of elements on your web pages. They consist of two parts: one that describes the animation of the elements, and another that contains keyframes indicating the animation properties of the element at specific time intervals.
Contact Us