Aquí hay un pequeño tutorial de animación CSS3:
Comencemos con lo básico, puedes animar tus objetos en los 3 ejes X, Y y Z, puedes acercar, alejar, desenfocar, desvanecer, escalar en escala de grises … Pero para ello tendrás que aprender la mayoría de los efectos CSS tiene que ofrecer, que no será cubierto en este tutorial
nombre-animacion: nombre-animacion;
animación-duración: 1s;
animación-temporización-función: lineal;
animación-retraso: 0s;
animación-iteración-cuenta: infinito;
animación-dirección: alterna;
animación-play-state: correr;
Estas son las siete propiedades de animación.
- ¿Cuáles son los 10 cursos edX más populares?
- Desde la perspectiva de un usuario: fortalezas y defectos de Coursera, Udacity y edX?
- Tengo 19 años y quiero informarme sobre el comercio y la inversión. He oído hablar de Forex, opciones binarias, acciones y penny stocks. ¿Cuáles son algunos buenos cursos en línea y por dónde debo comenzar?
- ¿Por qué se diluyen muchos cursos de Coursera?
- ¿Hay una lista de MOOC que agrega contenido a su página de github?
-Animaion name: especifica el nombre de la animación @keyframes.
–Animación-duración: especifica cuántos segundos o milisegundos tarda una animación en completar un ciclo.
-Animation-timing-function: especifica la curva de velocidad de la animación.
-Animation-delay: especifica cuándo comenzará la animación.
-Animation-iteration-count: Especifica el número de veces que se debe reproducir una animación.
-Animación-dirección: especifica si la animación debe reproducirse o no al revés en ciclos alternos.
-Animation-play-state: especifica si la animación se está ejecutando o está en pausa.
Podrías estar pensando que escribir todo eso sería un dolor, ¡lo que realmente es! Pero afortunadamente para nosotros hay una sintaxis alternativa, que dice algo como esto:
animación: animación-nombre 1s lineal 0s infinito alternativo;
Después de identificar su animación y todas sus propiedades, es hora de animar el objeto. Y la forma de hacerlo depende de cuántos estados tenga el elemento animado. Si solo son dos, haz esto:
@keyframes nombre-animación {
de {/ * Tu primer estado * /;}
a {/ * Tu último estado * /;}
}
Pero si tienes más estados puedes hacer esto:
@keyframes nombre-animación {
0% {/ * animación * /;}
25% {/ * animación * /;}
50% {/ * animación * /;}
75% {/ * animación * /;}
100% {/ * animación * /;}
}
¡Éstos son por supuesto los fundamentos! ¡Si tiene alguna pregunta, no dude en comunicarse conmigo!