Una animación es un efecto que permite a un elemento cambiar de un estilo inicial a otro final gradualmente.
Proceso:
Propiedades de la Animación
|
Propiedad |
Descripción |
|
@keyframes |
Especifica la animación |
|
animation |
Una propiedad resumida de todos los las propiedades de animación, excepto la propiedad de animación-play-estado |
|
animation-name |
Especifica el nombre de la animación de fotogramas clave @ |
|
animation-duration |
Especifica cuántos segundos o milisegundos una animación tarda en completar un ciclo. Predeterminado 0 |
|
animation-timing-function |
Describe cómo la animación progresará más de un ciclo de su duración. Default "facilidad" |
|
animation-delay |
Especifica cuando la animación se iniciará. Predeterminado 0 |
|
animation-iteration-count |
Especifica el número de veces que se reproduce una animación. Predeterminado 1 |
|
animation-direction |
Especifica si la animación debe realizarse a la inversa en ciclos alternos. Por defecto "normal" |
|
animation-play-state |
Especifica si la animación está en ejecución o en pausa. Default "en ejecución" |
Ejemplo 1
Observa el cambio de color de la caja
|
Estilos CSS3 |
Código HTML |
-
/*Animaciones*/
-
.Animacaja1
-
{
-
width:100px;
-
height:100px;
-
background:red;
-
-webkit-animation:prueba 5s infinite;
-
-moz-animation:prueba 5s infinite;
-
animation:prueba 5s infinite;
-
}
-
-
@-webkit-keyframes prueba
-
{
-
from {background:red;}
-
to {background:yellow;}
-
}
-
@keyframes prueba
-
{
-
from {background:red;}
-
to {background:yellow;}
-
}
|
<div class="Animacaja1"></div>
|
|
|
Ejemplo 2
|
Código CSS3 |
Código HTML |
-
@-webkit-keyframes girar {
-
from,0% {
-
-webkit-transform: scale(1) rotate(0deg);
-
-moz-transform: scale(1) rotate(0deg);
-
transform: scale(1) rotate(0deg); }
-
100% ,to{
-
-webkit-transform: scale(1.5)rotate(600deg);
-
-moz-transform: scale(1.5)rotate(600deg);
-
transform: scale(1.5)rotate(600deg);
-
}
-
}
-
@keyframes girar {
-
from,0% {
-
-webkit-transform: scale(1) rotate(0deg);
-
-moz-transform: scale(1) rotate(0deg);
-
transform: scale(1) rotate(0deg); }
-
100% ,to{
-
-webkit-transform: scale(1.5)rotate(600deg);
-
-moz-transform: scale(1.5)rotate(600deg);
-
transform: scale(1.5)rotate(600deg);}
-
}
-
.Animarueda1{
-
position: relative;
-
width: 50px;
-
height:50px;
-
border-radius: 50%;
-
-webkit-animation-name: girar;
-
-webkit-animation-duration: 2s;
-
-webkit-animation-iteration-count: infinite;
-
-webkit-animation-direction: alternate;
-
-
-moz-animation-name: girar;
-
-moz-animation-duration: 2s;
-
-moz-animation-iteration-count: infinite;
-
-moz-animation-direction: alternate;
-
-
animation-name: girar;
-
animation-duration: 2s;
-
animation-iteration-count: infinite;
-
animation-direction: alternate;
-
-
-
text-align: center;
-
display: table-cell;
-
vertical-align: middle;
-
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
-
color: #FFFFFF;
-
background-color: #CC99FF;
-
border-top-style: none;
-
border-right-style: none;
-
border-bottom-style: none;
-
border-left-style: none;
-
font-size: 18px;
-
}
|
<div class="Animarueda1">CSS3</div>
|
|
CSS3
|
Para saber más
