| |
| |
| |
How can we do animations with only CSS |
| |
| Download these examples |
|
| CSS allows animations of HTML elements without using JavaScript or Flash! Nice |
| All these properties @keyframes, animation-name, animation-duration, animation-delay, animation-iteration-count |
| animation-direction, animation-timing-function, animation-fill-mode, animation |
| Are supported in all these browsers: |
| |
 |
| | | When you specify CSS styles inside the @keyframes rule, the animation will gradually change from the |
| current style to the new style at certain times. |
| The following example binds the "example_1" animation to the div tag element. |
| The animation will last for 15 seconds, and it will gradually change the background-color of the div tag element |
| from "blue" to "yellow": |
|
| |
Example - 1 - |
| |
|
<html>
<head>
<style>
div{
width: 500px;
height: 50px;
background-color: blue;
animation-name: example_1;
animation-iteration-count: infinite;
animation-duration: 15s;
font-weight:bold;
font-size:36px;
color:white;
}
@keyframes example_1 {
from {background-color: blue;}
to {background-color: yellow;}
from {background-color: yellow;}
to {background-color: blue;}
}
</style>
</head>
<body>
<div><center> DZOSOFT </center></div>
</body>
</html>
|
|
|
|
| |
Example - 2 - |
| |
| The animation-delay property specifies a delay for the start of an animation. |
| The following example has a 2 seconds delay before starting the animation |
<!DOCTYPE html>
<html>
<head>
<style>
div{
width: 50px;
height: 50px;
background-image:url('image/dzosoft.jpg');
background-repeat: no-repeat;
position: relative;
animation-name: example_2;
animation-iteration-count: infinite;
animation-duration: 4s;
animation-delay: 2s;
}
@keyframes example_2 {
0% {background-image:url('image/dzosoft.jpg'); left:0px; top:0px;}
25% {background-image:url('image/dzosoft.jpg'); left:400px; top:0px;}
0% {background-image:url('image/dzosoft.jpg'); left:400px; top:400px;}
75% {background-image:url('image/dzosoft.jpg'); left:0px; top:400px;}
100% {background-image:url('image/dzosoft.jpg'); left:0px; top:0px;}
}
</style>
</head>
<body>
<div></div>
</body>
</html>
|
|
|
|
|
| |
Example - 3 - |
| |
| The animation-iteration-count property specifies the number of times an animation should run. |
| The following example will run the animation 5 times before it stops |
<!DOCTYPE html>
<html>
<head>
<style>
div{
width: 50px;
height: 50px;
background-image:url('image/dzosoft.jpg');
background-repeat: no-repeat;
position: relative;
animation-name: example_3;
animation-duration: 4s;
animation-iteration-count: 5;
}
@keyframes example_3 {
0% {background-image:url('image/dzosoft_1.jpg'); left:0px; top:0px;}
25% {background-image:url('image/dzosoft_2.jpg'); left:200px; top:0px;}
50% {background-image:url('image/dzosoft_3.jpg'); left:200px; top:200px;}
75% {background-image:url('image/dzosoft_4.jpg'); left:0px; top:200px;}
100% {background-image:url('image/dzosoft.jpg'); left:0px; top:0px;}
}
</style>
</head>
<body>
<div></div>
</body>
</html>
|
|
|
| |
| |
Example - 4 - |
| |
| The animation-direction property specifies whether an animation should be played forwards, |
| backwards or in alternate cycles. |
| The following example will run the animation in reverse direction (backwards) |
<!DOCTYPE html>
<html>
<head>
<style>
div{
width: 50px;
height: 50px;
background-image:url('image/dzosoft.jpg');
background-repeat: no-repeat;
position: relative;
animation-name: example_4;
animation-duration: 4s;
animation-direction: reverse;
}
@keyframes example_4 {
0% {background-image:url('image/dzosoft_1.jpg'); left:0px; top:0px;}
25% {background-image:url('image/dzosoft_2.jpg'); left:200px; top:0px;}
50% {background-image:url('image/dzosoft_3.jpg'); left:200px; top:200px;}
75% {background-image:url('image/dzosoft_4.jpg'); left:0px; top:200px;}
100% {background-image:url('image/dzosoft.jpg'); left:0px; top:0px;}
}
</style>
</head>
<body>
<div></div>
</body>
</html>
|
|
|
|
| |
Example - 5 - |
| |
| The animation-direction property specifies whether an animation should be played forwards, |
| backwards or in alternate cycles. |
| The following example uses the value "alternate" to make the animation run forwards first, then backwards |
| The animation-direction property can have the following values: |
|
| normal - The animation is played as normal (forwards). This is default |
| reverse - The animation is played in reverse direction (backwards) |
| alternate - The animation is played forwards first, then backwards |
| alternate-reverse - The animation is played backwards first, then forwards |
|
| The following example will run the animation in reverse direction (backwards): |
<!DOCTYPE html>
<html>
<head>
<style>
div{
width: 50px;
height: 50px;
background-image:url('image/dzosoft.jpg');
background-repeat: no-repeat;
position: relative;
animation-name: example_5;
animation-duration: 4s;
animation-direction: reverse;
}
@keyframes example_5 {
0% {background-image:url('image/dzosoft.jpg'); left:0px; top:0px;}
25% {background-image:url('image/dzosoft_1.jpg'); left:200px; top:0px;}
50% {background-image:url('image/dzosoft_2.jpg'); left:200px; top:200px;}
75% {background-image:url('image/dzosoft_3.jpg'); left:0px; top:200px;}
100% {background-image:url('image/dzosoft_4.jpg'); left:0px; top:0px;}
}
</style>
</head>
<body>
<div></div>
</body>
</html>
|
|
|
| |
| |
Example - 6 - |
| |
| The animation-direction property specifies whether an animation should be played forwards, backwards or in alternate cycles. |
| The following example uses the value "alternate-reverse" to make the animation run backwards first, then forwards: |
<!--
<!DOCTYPE html>
<html>
<head>
<style>
div{
width: 50px;
height: 50px;
background-image:url('image/dzosoft.jpg');
background-repeat: no-repeat;
position: relative;
animation-name: example_6;
animation-duration: 4s;
animation-iteration-count: 2;
animation-direction: alternate-reverse;
}
@keyframes example_6 {
0% {background-image:url('image/dzosoft.jpg'); left:0px; top:0px;}
25% {background-image:url('image/dzosoft_1.jpg'); left:500px; top:0px;}
50% {background-image:url('image/dzosoft_2.jpg'); left:500px; top:100px;}
75% {background-image:url('image/dzosoft_3.jpg'); left:0px; top:100px;}
100% {background-image:url('image/dzosoft_4.jpg'); left:0px; top:0px;}
}
</style>
</head>
<body>
<div></div>
</body>
</html>
|
|
|
|
| |
Example - 7 - |
| |
| The animation-timing-function property specifies the speed curve of the animation. |
| It can have the following values: |
|
| ease - Specifies an animation with a slow start, then fast, then end slowly (this is default) |
| linear - Specifies an animation with the same speed from start to end |
| ease-in - Specifies an animation with a slow start |
| ease-out - Specifies an animation with a slow end |
| ease-in-out - Specifies an animation with a slow start and end |
| cubic-bezier(n,n,n,n) - Lets you define your own values in a cubic-bezier function |
|
|
| The following example shows some of the different speed curves that can be used |
<!DOCTYPE html>
<html>
<head>
<style>
div{
width: 50px;
height: 50px;
background-color: white;
font-weight: bold;
position: relative;
animation: move_dzo 5s infinite;
}
.div_1{
background-image:url('image/dzosoft.jpg');
background-repeat: no-repeat;
animation-timing-function: linear;
}
.div_2{
background-image:url('image/dzosoft_1.jpg');
background-repeat: no-repeat;
animation-timing-function: ease;
}
.div_3{
background-image:url('image/dzosoft_2.jpg');
background-repeat: no-repeat;
animation-timing-function: ease-in;
}
.div_4{
background-image:url('image/dzosoft_3.jpg');
background-repeat: no-repeat;
animation-timing-function: ease-out;
}
.div_5{
background-image:url('image/dzosoft_4.jpg');
background-repeat: no-repeat;
animation-timing-function: ease-in-out;
}
@keyframes move_dzo {
from {left: 0px;}
to {left: 500px;}
}
</style>
</head>
<body>
<div class="div_1"></div>
<div class="div_2"></div>
<div class="div_3"></div>
<div class="div_4"></div>
<div class="div_5"></div>
</body>
</html>
|
|
|
|
|
| |
Example - 8 - |
| |
| The animation-fill-mode property specifies a style for the target element when the animation is not playing |
| (before it starts, after it ends, or both). |
| The following example lets the <div> element retain the style values from the last keyframe |
| when the animation ends: |
<!DOCTYPE html>
<html>
<head>
<style>
div{
width: 50px;
height: 50px;
background-image:url('image/dzosoft_1.jpg');
background-repeat: no-repeat;
position: relative;
animation-name: example_8;
animation-duration: 3s;
animation-fill-mode: forwards;
}
@keyframes example_8 {
from {top: 0px;}
to {top: 400px; background-image:url('image/dzosoft_1.jpg');}
}
</style>
</head>
<body>
<div></div>
</body>
</html>
|
|
|
| |
| |
Example - 9 - |
| |
| The following example lets the element get the style values set by the first keyframe before the animation starts |
| (during the animation-delay period): |
| Let the div element get the style values set by the first keyframe before the animation starts |
| (during the animation-delay period) |
<!DOCTYPE html>
<html>
<head>
<style>
div{
width: 50px;
height: 50px;
background-image:url('image/dzosoft_2.jpg');
background-repeat: no-repeat;
position: relative;
animation-name: example_9;
animation-duration: 3s;
animation-delay: 2s;
animation-fill-mode: backwards;
}
@keyframes example_9 {
from {top: 0px; background-image:url('image/dzosoft_2.jpg');}
to {top: 200px;}
}
</style>
</head>
<body>
<div></div>
</body>
</html>
|
|
| |
| |
Example - 10 - |
| |
| This example uses six of the animation properties |
|
<!DOCTYPE html>
<html>
<head>
<style>
div{
width: 50px;
height: 50px;
background-image:url('image/dzosoft_3.jpg');
background-repeat: no-repeat;
position: relative;
animation-name: example_10;
animation-duration: 5s;
animation-timing-function: linear;
animation-delay: 2s;
animation-iteration-count: infinite;
animation-direction: alternate;
}
@keyframes example_10 {
0% {background-image:url('image/dzosoft.jpg'); left:0px; top:0px;}
25% {background-image:url('image/dzosoft_1.jpg'); left:200px; top:0px;}
50% {background-image:url('image/dzosoft_2.jpg'); left:200px; top:200px;}
75% {background-image:url('image/dzosoft_3.jpg'); left:0px; top:200px;}
100% {background-image:url('image/dzosoft_4.jpg'); left:0px; top:0px;}
}
</style>
</head>
<body>
<div></div>
</body>
</html>
|
|
|
|
| |
Example - 11 - |
| |
| This example uses the shorthand animation property: |
<!DOCTYPE html>
<html>
<head>
<style>
div{
width: 50px;
height: 50px;
background-image:url('image/dzosoft.jpg');
background-repeat: no-repeat;
position: relative;
animation: example_11 5s linear 2s infinite alternate;
}
@keyframes example_11 {
0% {background-image:url('image/dzosoft.jpg'); left:0px; top:0px;}
25% {background-image:url('image/dzosoft_1.jpg'); left:300px; top:0px;}
50% {background-image:url('image/dzosoft_2.jpg'); left:300px; top:300px;}
75% {background-image:url('image/dzosoft_3.jpg'); left:0px; top:300px;}
100% {background-image:url('image/dzosoft_4.jpg'); left:0px; top:0px;}
}
</style>
</head>
<body>
<div></div>
</body>
</html>
|
EN 
Español - ES 
