| |
| |
| |
Cómo podemos hacer animaciones con solo CSS? |
| |
| Descarga estos ejemplos |
|
| CSS permite animaciones de elementos HTML sin usar JavaScript o Flash. Lindo |
| Todas estas propiedades @keyframes, animation-name, animation-duration, animation-delay, animation-iteration-count |
| dirección de animación, función de tiempo de animación, modo de relleno de animación, animación |
| Son compatibles con todos estos navegadores: |
| |
 |
| | | Cuando especifica estilos CSS dentro de la regla @keyframes, la animación cambiará gradualmente desde el |
| estilo actual al nuevo estilo en determinados momentos. |
| El siguiente ejemplo vincula la animación "example_1" al elemento de etiqueta div. |
| La animación durará 15 segundos y cambiará gradualmente el color de fondo del elemento de la etiqueta div. |
| de "azul" a "amarillo": |
|
| |
Ejemplo 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>
|
|
|
|
| |
Ejemplo - 2 - |
| |
| La propiedad animation-delay especifica un retraso para el inicio de una animación. |
| El siguiente ejemplo tiene un retraso de 2 segundos antes de iniciar la animación. |
<!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>
|
|
|
| |
Ejemplo - 3 - |
| |
| La propiedad animation-iteration-count especifica el número de veces que debe ejecutarse una animación. |
| El siguiente ejemplo ejecutará la animación 5 veces antes de que se detenga |
<!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>
|
|
|
| |
Ejemplo - 4 - |
| |
| La propiedad animation-direction especifica si una animación debe reproducirse hacia adelante, |
| hacia atrás o en ciclos alternos. |
| El siguiente ejemplo ejecutará la animación en dirección inversa (hacia atrás) |
<!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>
|
|
|
|
| |
Ejemplo - 5 - |
| |
| La propiedad animation-direction especifica si una animación debe reproducirse hacia adelante, |
| hacia atrás o en ciclos alternos. |
| El siguiente ejemplo usa el valor "alternativo" para hacer que la animación se ejecute primero hacia adelante y luego hacia atrás. |
| La propiedad animation-direction puede tener los siguientes valores: |
|
| normal: la animación se reproduce normalmente (hacia delante). Esto es predeterminado |
| reverse: la animación se reproduce en dirección inversa (hacia atrás) |
| alternativo: la animación se reproduce primero hacia adelante y luego hacia atrás |
| Alternate-reverse: la animación se reproduce primero hacia atrás y luego hacia adelante |
|
| El siguiente ejemplo ejecutará la animación en dirección inversa (hacia atrás): |
<!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>
|
|
|
|
| |
Ejemplo - 6 - |
| |
| La propiedad animation-direction especifica si una animación debe reproducirse hacia adelante, hacia atrás o en ciclos alternos. |
| El siguiente ejemplo usa el valor "alternativo-reverso" para hacer que la animación se ejecute primero hacia atrás y luego hacia adelante: |
<!--
<!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>
|
|
|
|
| |
Ejemplo - 7 - |
| |
| La propiedad animation-timing-function especifica la curva de velocidad de la animación. |
| Puede tener los siguientes valores: |
|
| facilidad: especifica una animación con un comienzo lento, luego rápido y luego un final lento (esto es predeterminado) |
| lineal: especifica una animación con la misma velocidad de principio a fin |
| ease-in: especifica una animación con un comienzo lento |
| ease-out: especifica una animación con un final lento |
| ease-in-out: especifica una animación con un comienzo y un final lentos |
| cubic-bezier(n,n,n,n) - Le permite definir sus propios valores en una función cubic-bezier |
|
|
| El siguiente ejemplo muestra algunas de las diferentes curvas de velocidad que se pueden utilizar |
<!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>
|
|
|
|
|
| |
Ejemplo - 8 - |
| |
| La propiedad animation-fill-mode especifica un estilo para el elemento de destino cuando la animación no se está reproduciendo. |
| (antes de que empiece, después de que termine, o ambos). |
| El siguiente ejemplo permite que el elemento <div> conserve los valores de estilo del último fotograma clave |
| cuando termina la animación: |
<!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>
|
|
|
|
| |
Ejemplo - 9 - |
| |
| El siguiente ejemplo permite que el elemento obtenga los valores de estilo establecidos por el primer fotograma clave antes de que comience la animación. |
| (durante el período de retraso de la animación): |
| Deje que el elemento div obtenga los valores de estilo establecidos por el primer fotograma clave antes de que comience la animación |
| (durante el período de retraso de la animación) |
<!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>
|
|
|
| |
Ejemplo - 10 - |
| |
| Este ejemplo utiliza seis de las propiedades de animación. |
|
<!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>
|
|
|
|
| |
Ejemplo - 11 - |
| |
| Este ejemplo utiliza la propiedad animación abreviada: |
<!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>
|
ES 
English - EN 
Français - FR 
