(+34) 673 566 782 - (+34) 960 653 052 formacion@imaginagroup.com

Animaciones usando CSS3 transitions

HTML5 y CSS3
Intermedio
25 minutos

En este tutorial vamos a aprender como crear unas sencillas transiciones aumentando el tamaño de la imagen que nos permiten las nuevas propiedades de CSS3.

Para este ejercicio utilizaremos las propiedades de transition. Todavía no son reglas estandarizadas al 100% y por tanto en nuestra hoja de estilos deberemos incluir el prefijo de los diferentes propietarios de los diferentes motores render de navegadores (-webkit, -moz, -ms, -o).

Vamos a empezar con nuestro documento HTML . Crearemos una lista dentro de nuestro contenedor que nos servirá para poner en línea los diferentes elementos de a los que les aplicaremos los efectos de transición mediante CSS3.

Dentro de cada elemento de lista tendremos una imagen, un encabezado y un párrafo descriptivo.

</p>
<div class="wrap">
<ul>
<li class="juego">
<img src="img/juego01.jpeg" title="Animaciones usando CSS3 transitions" alt=" Animaciones usando CSS3 transitions"></p>
<h2>Carcassonne</h2>
<p>Los Cátaros</li>
<li class="juego">
<img src="img/juego02.jpeg" title="Animaciones usando CSS3 transitions" alt=" Animaciones usando CSS3 transitions"></p>
<h2>Caylus</h2>
<p>Felipe IV de Francia</li>
<li class="juego">
<img src="img/juego03.jpeg" title="Animaciones usando CSS3 transitions" alt=" Animaciones usando CSS3 transitions"></p>
<h2>Catan</h2>
<p>La Gran Caravana</li>
</ul>
</div>
<p><!-- .wrap --></p>
<p>

Así es como nos quedaría la vista con el maquetado básico.

Y si añadimos el :hover nos debería mostrar de la siguiente manera:

Con este primer paso solo tenemos un cambio básico de un estado a otro y lo que queremos es que haya un movimiento suave y que vaya creciendo la imagen con las nuevas funcionalidades de CSS3.

En primer lugar vamos a pasarle la regla de transición a cada elemento de nuestra lista declarado con la clase .juego. Como comentábamos antes, al no estar estandarizado pondremos los prefijos de los navegadores propietarios.

Con este shorthand le decimos a la regla transition que anime a todos los elementos contenidos que sean animables (all), depués le decimos el tiempo (300 milisegundos) y con la propiedad ease-out le decimos que vaya de más lento a más rápido. Esto se basa en las ecuaciones de las curvas de beizer y si quieres ampliar el funcionamiento de este tipo de curvas en CSS3 puedes visitar la página de Ceaser de Matthew Lein y probar todos los efectos que te permite.

</p>
<p>.juego {<br />
width:200px;<br />
padding:2em 1em 1em 1em;<br />
text-align: center;</p>
<p>-webkit-transition: all 300ms ease-out;<br />
-moz-transition: all 300ms ease-out;<br />
-ms-transition: all 300ms ease-out;<br />
-o-transition: all 300ms ease-out;<br />
transition: all 300ms ease-out;<br />
}</p>
<p>

Por otro lado vamos a darle estilos a las imágenes de los juegos. Por una parte reduciremos el tamaño al 90% para que la animación sea más acentuada mediante la regla transform y la propiedad scale.

</p>
<p>.juego img {<br />
margin:auto;<br />
display:block;</p>
<p>-webkit-transform: scale(.9);<br />
-moz-transform: scale(.9);<br />
-ms-transform: scale(.9);<br />
-o-transform: scale(.9));<br />
transform: scale(.9);</p>
<p>-webkit-transition: all 400ms cubic-bezier(0.250, 0.460, 0.450, 0.940);<br />
-moz-transition: all 400ms cubic-bezier(0.250, 0.460, 0.450, 0.940);<br />
-ms-transition: all 400ms cubic-bezier(0.250, 0.460, 0.450, 0.940);<br />
-o-transition: all 400ms cubic-bezier(0.250, 0.460, 0.450, 0.940);<br />
transition: all 400ms cubic-bezier(0.250, 0.460, 0.450, 0.940); /* easeOutQuad */<br />
}</p>
<p>

En estas últimas transformaciones hemos optado por tomar uno de los ajustes predefinidos que comentábamos antes de las curvas Beizer, en este caso el easeOutQuad.

Pasamos ahora a modificar el estado :hover de nuestros elementos de lista así como de las imágenes que están contenidas y que es lo que realmente nos dará un aspecto fresco a nuestros elementos de lista.

</p>
<p>.juego:hover {<br />
background-color:white;<br />
background-color: rgba(200,200,200,.3);<br />
-webkit-border-radius: 10px;<br />
border-radius: 10px;<br />
cursor: pointer;<br />
}</p>
<p>.juego:hover img {<br />
-moz-transform: scale(1);<br />
-webkit-transform: scale(1);<br />
-o-transform: scale(1));<br />
-ms-transform: scale(1);<br />
transform: scale(1);<br />
}<br />
.juego:hover h2 {<br />
color:#c9a833;<br />
}</p>
<p>

Podemos observar que le hemos dado 1 al valor de escalado que antes tenía 0.9 y que de esta forma y se escalará con una transición diferente a la de la opacidad pero que es muy similar. Es un poco más lenta la animación de la imagen por tanto la opacidad y el redondeado del elemento de lista acabará antes que el de la imagen.

En Imagina Formación te ofrecemos formación en estas nuevas tecnologías. Si quieres estar a la última en cualquiera de las diferentes plataformas, y a fin de cuentas, tu objetivo es aprender no dudes en solicitar información sin compromiso. Contamos con las herramientas y los medios necesarios para impartir cualquier tipo de formación. Te lo ponemos fácil. Formación online, presencial o de empresa, elige la modalidad que mejor se adapte a tus necesidades.

¿Sabes cómo puedes realizar una formación sin coste para tu empresa?

¿Buscas cursos bonificados? ¿Conoces qué es la Fundación Tripartita? Si eres trabajador tus cursos están subvencionados. Imagina Formación es una entidad organizadora de la Fundación Estatal de modo que puedes gestionar la formación bonificada de los cursos con nosotros. Nos encargamos de todos los trámites para conseguir la bonificación sin ningún coste adicional. Cumplimos con todos los requisitos para que nuestros cursos sean 100% bonificables.

Échale un vistazo a nuestro catálogo de Cursos Destacados y amplia tus conocimientos en las últimas tecnologías de referencia del sector. Si tienes cualquier duda… ¡Contacta con nosotros!

Uso de cookies: Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies

ACEPTAR
Aviso de cookies