Animaciones con CSS

Vista previa del material en texto

Animaciones con css
Animaciones antes:
No funcionaban en dispositivos móviles
Se aplicaban en formato SWF
Pesaban más las páginas y tardaban mucho en cargar
transiciones
1. Especificar el valor inicial
2. Especificar el valor final
	Propiedad	Valores
	transition-property	width
height
transform
all
	transition-duration	s
.transicion1
{
width: 100px;
height: 100px;
background: red;
transition-property: width;
transition-duration: 2s;
}
Se especifican los valores iniciales
Especificar que se va a realizar una transición
.transicion1: hover
{
width: 300px;
transform: rotate(180deg);
}
2. Se especifica el valor final (solo lo que cambió)
Especificar cuando se activa (en el hover)
<div class=“transicion1”>
3. Aplicarlo a un div
	Propiedad	Valores	Explicación
	transition-delay	s	Tiempo que tarda en comenzar
	transition-timing-function	linear
ease
ease-in
ease-out
ease-in-out	Tipo de curva de animación
	Propiedad	Valores	Explicación
	opacity	número	Cambio de opacidad
	transform	translateY(númeropx)
translateX(númeropx)
scale(número, número)	Cambio de posición
Otras propiedades que se pueden añadir
Botón con efectos
.button
{
background-color: #4CAF50; transition-duration: 0.4s;
}
1. valor inicial
.button: hover
{
background-color: #FFFFFF;
}
2. valor final
Keyframes en css
Similar a las transiciones pero la operación se hace a través de keyframes (en un tiempo determinado) 
Desde que carga la página hasta el tiempo especificado
 Desde que carga la página pasando por porcentajes especificados 
Keyframes en css
Comienza cuando carga la página, se aplica a divs
Ponerle un nombre a la animación
Valores iniciales
Valores finales (desde y hasta)
Para animar más de 2 valores
Usa porcentajes por cada valor en lugar de FROM y TO
Para animar movimiento
Usa valores de posición
Tipos de curvas de animación
	Propiedad	Valores	Explicación
	animation-direction	normal
reverse
alternate	Dirección entre ciclos
	animation-iteration-count	número
infinite	Repeticiones
	animation-fill-mode	forwards	Para que no regrese al inicio
Otras propiedades que se pueden añadir
También en Internet hay presets que se pueden usar
https://animate.style/
Y programas como: 
Adobe Animate y Google Web Designer