We can use CSS animations to animate transitions from one CSS style configuration to another.
Animations consist of three parts:
To create a CSS animation sequence, we style the element
with the animation
shorthand property or other animation related properties.
We can configure the timing and duration of the animation, as well as other details of how the animation sequence should progress.
The actual appearance of the animation is done
using the @keyframes
at-rule.
The following table lists the @keyframes
rule and all the animation properties:
This example shows how to use CSS animations to make H1
elements
move across the page.
<!-- w w w . j a va 2 s . co m-->
<!doctype html>
<html>
<head>
<style type="text/css">
h1 {
-moz-animation-duration: 3s;
-webkit-animation-duration: 3s;
-moz-animation-name: slidein;
-webkit-animation-name: slidein;
}
@-moz-keyframes slidein {
from {
margin-left:100%;
width:300%
}
to {
margin-left:0%;
width:100%;
}
}
@-webkit-keyframes slidein {
from {
margin-left:100%;
width:300%
}
to {
margin-left:0%;
width:100%;
}
}
</style>
</head>
<body>
<h1>Watch me move</h1>
</body>
</html>
This example shows how to use CSS animations to make H1
elements
move across the page and enlarge text size as it goes.
<!doctype html>
<html>
<head>
<title>CSS animations: Example 2</title>
<style type="text/css">
h1 {<!-- www . j ava2 s .co m-->
-moz-animation-duration: 3s;
-webkit-animation-duration: 3s;
-moz-animation-name: slidein;
-webkit-animation-name: slidein;
}
@-moz-keyframes slidein {
from {
margin-left:100%;
width:300%
}
75% {
font-size:300%;
margin-left:25%;
width:150%;
}
to {
margin-left:0%;
width:100%;
}
}
@-webkit-keyframes slidein {
from {
margin-left:100%;
width:300%
}
75% {
font-size:300%;
margin-left:25%;
width:150%;
}
to {
margin-left:0%;
width:100%;
}
}
</style>
</head>
<body>
<h1>Watch me move</h1>
</body>
</html>
To make the animation repeat itself,
use the animation-iteration-count
property
to indicate how many times to repeat the animation.
The following code uses infinite
to have the animation repeat indefinitely:
<!--from w w w. j a v a2 s.c o m-->
<!doctype html>
<html>
<head>
<title>CSS animations: Example 3</title>
<style type="text/css">
h1 {
-moz-animation-duration: 3s;
-webkit-animation-duration: 3s;
-moz-animation-name: slidein;
-webkit-animation-name: slidein;
-moz-animation-iteration-count: infinite;
-webkit-animation-iteration-count: infinite;
}
@-moz-keyframes slidein {
from {
margin-left:100%;
width:300%
}
75% {
font-size:300%;
margin-left:25%;
width:150%;
}
to {
margin-left:0%;
width:100%;
}
}
@-webkit-keyframes slidein {
from {
margin-left:100%;
width:300%
}
75% {
font-size:300%;
margin-left:25%;
width:150%;
}
to {
margin-left:0%;
width:100%;
}
}
</style>
</head>
<body>
<h1>Watch me move</h1>
</body>
</html>
The code above is rendered as follows:
To move back and forth across the screen, we can set animation-direction
to alternate
.
<!-- w w w.java2s .c om-->
<!doctype html>
<html>
<head>
<title>CSS animations: Example 4</title>
<style type="text/css">
h1 {
-moz-animation-duration: 3s;
-webkit-animation-duration: 3s;
-moz-animation-name: slidein;
-webkit-animation-name: slidein;
-moz-animation-iteration-count: infinite;
-webkit-animation-iteration-count: infinite;
-moz-animation-direction: alternate;
-webkit-animation-direction: alternate;
}
@-moz-keyframes slidein {
from {
margin-left:100%;
width:300%
}
75% {
font-size:300%;
margin-left:25%;
width:150%;
}
to {
margin-left:0%;
width:100%;
}
}
@-webkit-keyframes slidein {
from {
margin-left:100%;
width:300%
}
75% {
font-size:300%;
margin-left:25%;
width:150%;
}
to {
margin-left:0%;
width:100%;
}
}
</style>
</head>
<body>
<h1>Watch me move</h1>
</body>
</html>
The code above is rendered as follows:
Property | Description | CSS |
---|---|---|
animation-delay | Set when the animation will start | 3 |
animation-direction | play animation in reverse on alternate cycles | 3 |
animation-duration | Set duration in seconds or milliseconds for an animation in one cycle | 3 |
animation-fill-mode | Set what values to use by the animation is not playing | 3 |
animation-iteration-count | Set the number of times to play an animation | 3 |
animation-name | Set a name for the @keyframes animation | 3 |
animation-play-state | Run or pause the animation | 3 |
animation-timing-function | Set the speed curve of the animation | 3 |
animation | Shorthand property for all the animation properties | 3 |
@keyframes | Create key frame for animation | 3 |