Animaciones con keyframes

Contactar con el profesor

Keyframes

div.box1{
	width:300px;
	height:300px;
	background: red;
}
div.box1:hover{
	animation:move 2s;
}
@keyframes move{
	from{transform:rotate(0deg);}
	to{transform:rotate(45deg);}
}

Descompuesto

animation-name:move;
animation-duration:2s;
animation-timing-function:ease-in;
animation-iteration-count:2; /* infinite para infinitas repeticiones */

Alternate

Debe tener al menos un animation-iteration-count de 2.

Alternate Reverse

Debe tener al menos un animation-iteration-count de 2.

Persistir estado final

animation-fill-mode: forwards

Ejercicio KeyFrames – barra de habilidad

Nota: Para realizar este ejercicio usaremos keyframes, pero no usaremos el estilo transform.

Ejercicio KeyFrames 2 – barra de habilidad con corazones

animation-direction

alternate

animation-direction: reverse; alternate;

alternate-reverse

animation-direction: reverse; alternate-reverse;

Delay

animation-delay:2s;

step by step

@keyframes move6{
	0%{transform:translateX(0px);}
	30%{transform: skew(200deg, 200deg);}
	60%{transform: scale(2,2);}
	100%{transform:rotate(1300deg);}
}

pause and play

div{
	background: red;
	width:400px;
	height:400px;
	animation:changeBackground 0.3s ease-in 1s infinite alternate;
	animation-play-state:paused;
}
div:hover{
	animation-play-state:running;	
}

animation-step

Colección de animaciones

Links de interés Animaciones y CSS3

← Formularios
Responsive Design con media queries →

Aviso Legal | Política de privacidad