Animaciones con CSS3

Animaciones con Transition

transition I - Sin animación

Sin animación

transition II - Con animación

Con transición
<style type="text/css">
	div{	background-color: pink;width:300px; height:300px; transition: 3s;}
	div:hover{background-color: black;}
</style>

transition II - Con animación 2

<style type="text/css">
	div{
		background-color: pink;width:300px; height:300px; transition: 3s;
	}
	div:hover{
		background-color: black;transition: 0.5s;
	}
</style>
Con transición 2

Notas:

El segundo transition define la duración de la animación cuando hago hover, es decir, a la ida, y el primero cuando quito el cursor de encima del elemento, es decir a la vuelta.

Lo normal es utilizar sólo el primer transition y que por tanto la animación a la ida y a la vuelta duren lo mismo.

Ejercicio - animar fuentes

Ejercicio - hacer la siguiente botonera

transition III - CSS descompuesto

div{
	background-color: pink;width:300px; height:300px;
	transition-property: width;
	transition-duration: 1s;
	/*Los tipos de aceleración aceptados son: ease, linear, ease-in, ease-out, ease-in-out*/
	transition-timing-function: linear;
}
Transición descompuesta

Notas:

Aceleraciones: linear, ease, ease-in, ease-out, ease-in-out, cubic-bezier(0.42,0,0.58,1).
Para configurar aceleraciones bezier:http://matthewlein.com/ceaser/

Ejercicio

Tener en cuenta que si deseo animar varios estilos, los separaré con comas:
transition:width 2s, height 2s;

Ejercicio multiple background transition

Para hacer este ejercicio, tener en cuenta que en general, al elemento sin hover el aplico estilo genérico "background", y al elemento con hover, el estilo concreto ("background-position", "background-color", etc.)

Ejercicio width

Hacer el ejercicio del enlace

Ejercicio transform:scale

transition V - target

Cuando en el href de un enlace en lugar de poner una url pongo la id de un elemento, esa id sustituirá a :target en la hoja de estilos. No funciona con el class.

<style type="text/css">
	.container{	
		background: pink;
		width:300px; 
		height:300px;
		-webkit-transition:all 2s;
	}
	div:target{
		height:600px;
	}
</style>

<a href="#left">link</a>
<div id="left" class="container">
</div>
usando el atributo target

Transform

transform:translateX

Transform, translateX
div{	
	background-color: pink;  
	width:300px; 	
	height:300px;
	transition:transform 2s;
}
div:hover{
	/*transform: function()*/
	transform:translateX(100px);
}

transform:translateY

Repetir el ejercicio anterior, pero que el rectángulo se mueva ahora en el eje Y.

transform: translateY

Es posible mover la capa en los ejes X e Y simultáneamente utilizando:

transform:translate(100px, 200px);
transform: translate

transform:rotate

Repetir el ejercicio anterior, pero rotando el rectángulo.

transform:rotate(720deg);
transform:rotate

Para concatenar efectos utilizo el espacio en blanco.
Ejemplo:

transform:translate(100px, 200px) rotate(400deg);

transform:skewX

Repetir el ejercicio anterior, pero sesgando en el eje X el rectángulo.

transform:skewX(-25deg);
transform: skewX

transform:scale

transform:scale(5);
transform:scale(0.5, 4);
transform:scale

perspective

<style>
	#div1 {
		position: relative;
		height: 150px;
		width: 150px;
		border: 1px solid black;
		perspective: 150px;
	}
	#div2 {
		width: 100%;
		height: 100%;
		position: absolute;
		background-color: red;
		transition:1s;
	}
	#div2:hover{
	transform: rotateX(45deg);
	}
</style>


<div id="div1">
<div id="div2"></div>
</div>
perspective

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);}
}
keyframes

Descompuesto

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

Persistir estado final

animation-fill-mode: forwards
Persistir el estado tras la animacion

Ejercicio KeyFrames - barra de habilidad

Ejercicio KeyFrames 2 - barra de habilidad con corazones

animation-direction

alternate
alternate
animation-direction: reverse; alternate;
alternate-reverse
animation-direction: reverse; alternate-reverse;

Delay

animation-delay:2s;
animation delay

step by step

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

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;	
}
pause y play

animation-step

animation-step

Colección de animaciones

transform

Índice del curso de HTML5

  1. Introducción
  2. Estructura de una página web
  3. Comentarios
  4. Encabezados y párrafos
  5. Enlaces e imágenes
  6. Listas
  7. Listas
  8. iframes
  9. Páginas de consulta
  10. Tablas
  11. Estilos en línea
  12. Unidades de medida
  13. Hacer una NewsLetter con HTML
  14. favicon
  15. Hojas de estilos
  16. Capas
  17. GIMP
  18. Selectores CSS
  19. Margin Collapse
  20. padding y width
  21. Ejercicios de maquetación vertical
  22. display:block, inline, inline-block
  23. img vs background
  24. Flex Box
  25. Hacer una newsletter responsive sin media queries
  26. Algunos tips
  27. Ejercicios
  28. Break! - gran día de repaso
  29. Ejercicio - background centrado
  30. Links de interés
  31. position
  32. Opacidades
  33. Popups con CSS
  34. Galería de fotos
  35. Navigation Bar
  36. Estilo important!
  37. Hacer páginas reales
  38. Grid Layout
  39. Selectores avanzados de CSS
  40. Página de error 404
  41. Insertar un buscador de google
  42. Dominio y alojamiento
  43. Ejercicio - Proyecto
  44. HTML5: definición y ejemplos
  45. HTML5 vs HTML4
  46. Content editable
  47. Soporte para textos asiáticos
  48. divs semánticos
  49. Video y audio
  50. svg
  51. wbr - Word Break
  52. Formularios
  53. Motores de navegación
  54. text-shadow
  55. border-radius, box-shadow
  56. border-image
  57. background-size
  58. Multiple Background
  59. Background transparency
  60. Gradientes
  61. Fuentes
  62. columns
  63. text-overflow
  64. Animaciones con CSS3
  65. Responsive design
icono de mandar un mail¡Contacta conmigo!
contacta conmigoPablo Monteserín

¡Hola! ¿En qué puedo ayudarte?