Bernardo Martín
UI Developer | CSS & Animation Developer | Frontend Developer
animation
Permite tener animaciones usando estilos CSS
animation :
- animation-name
- animation-duration
- animation-timing-function
- animation-delay
- animation-iteration-count
- animation-direction
- animation-fill-mode
- animation-play-state
animation-name
Indica el nombre que le daremos a nuestra animación. Este nombre lo usaremos en el @keyframes , donde definiremos las transiciones, transformaciones de nuestra animación
animation-duration
Indica el tiempo que tardará la animación el terminar un ciclo completo.
Indicaremos el tiempo en segundos (s), sin espacios entre la cantidad y el signo de segundos(s).
animation-timing-function
Especifica como una animación CSS debería progresar sobre la duración de cada ciclo respecto.
- ease:valor por defecto.Inicia lento, se acelera y termina decelerando.
- ease-in:tiene un comienzo lento.
- ease-out:tiene un final lento.
- ease-in-out:inicio y final lento.
- linear:misma velocidad inicio y fin.
- step-start
- step-end
animation-timing-function
En las herramientas para desarrolador de Chrome, podemos definir una tabla Bezier específica, cómo?
Si hemos definido en un elemento la característica animation y hemos especificado un animation-timing-function nos saldrá en las características usadas un icono como este haciendo click sobre él, tendremos una tabla Bezer para poder definir una propia.
animation-timing-function
Un enlace con ejemplos de valores y gráficas de Bezier lo podemos encontrar en este enlace:
Un enlace donde podemos crear nuestros propios cubic-beizer:
animation-delay
Es el tiempo que queremos que tarde en comenzar nuestra animación una vez cargada nuestra página.
Se expresa en tiempo en segundos(s) o milisegundos(ms).
animation-direction
Indica la dirección que toma nuestra animación.
- normal
- reverse
- alternate
- alternate-reverse
animation-iteration-count
Indica la cantidad de veces que quieres que se ejecute tu animación.
animation-fill-mode
Especifica un estilo para el elemento cuando la animación no está jugando (cuando esté terminado, o cuando se tiene un retraso).
- backwards:vuelve al punto inicial.
- fordwards:se queda donde termina la animación
- none:valor por defecto.
animation-play-state
Indica si la animación está en ejecución o pausada.
- running
- paused
@keyframes
Es el lugar donde definiremos la animación que se va a crear.
@keyframes mymove {
from {left: 0px;}
to {left: 200px;}
}
@keyframes
Es el lugar donde definiremos la animación que se va a crear.
@keyframes mymove {
10% {left: 0px;}
20%{left: 20px;}
50%{left:100px;}
100%{left:200px;}
}
Web animation API
Definiremos la animación indicando dos características el keyframes y las características que influyen en la actividad de la animación.
element.animate(keyframes, 3000);
element.animate(keyframes, options);
Web animation API
El keyframes será un array de objetos, donde cada objeto definirá cada acción que realizará nuestra animación.
var keyframes = [
{ transform: 'translateY(-1000px) scaleY(2.5) scaleX(.2)', transformOrigin: '50% 0', filter: 'blur(40px)', opacity: 0 },
{ transform: 'translateY(0) scaleY(1) scaleX(1)', transformOrigin: '50% 50%', filter: 'blur(0)', opacity: 1 }
];
0% { transform: translateY(-1000px) scaleY(2.5) scaleX(.2); transform-origin: 50% 0; filter: blur(40px); opacity: 0; }
100% { transform: translateY(0) scaleY(1) scaleX(1); transform-origin: 50% 50%; filter: blur(0); opacity: 1; }
CSS
Web animation API
Enlace para ampliar conocimientos:
Web animation API
En la segunda característica de animate podemos definir solo el tiempo que tarda nuestra animación a realizarse o podemos darle todas las características que engloba nuestra animación.
var options = {
iterations: Infinity,
iterationStart: 0,
delay: 0,
endDelay: 0,
direction: 'alternate',
duration: 700,
fill: 'forwards',
easing: 'ease-out', }
Enlaces interesantes
Para más slides sobre CSS:
https://bermartinv.github.io/css/files/taller/menu_taller.html
animation @keyframe
By Bernardo Martín
