CSS avanzado: 12 trucos

La propiedad transition y su sintaxis dentro de CSS

¡Prueba gratis durante 10 días

nuestros 1218 cursos !

Prueba gratis Mostrar modalidades de suscripción
Mediante la propiedad transition y sus valores seremos capaces de controlar tanto la duración como el tipo de animación a realizar. Por eso es importante que sepamos cómo usarlo y a qué elemento debemos aplicárselo. En este video vamos a trabajar con esta propiedad para que aprendas a usarla

Transcripción

En este vídeo vamos a aprender qué es la propiedad 'transition' y cómo se utiliza. Cuando estamos haciendo animaciones y tenemos, por ejemplo, este diseño y tenemos ciertos elementos, podemos aplicarles distintas trasformaciones. Estas transformaciones, el navegador las renderiza en modo bloque. Es decir, lo que hace es sustituir un valor por otro, sin ningún tipo de afinamiento. Con 'transition', lo que vamos a conseguir es realizar esas animaciones de manera sutil o suave. ¿La sintaxis? La sintaxis es: 'transition', la cantidad de tiempo que queremos que dure nuestro efecto y las propiedades a las que va a afectar esa transición. Es decir, como valor genérico podríamos poner 'all' y él lo que va a hacer es que todas las propiedades que sean susceptibles de modificación, tenerlas en cuenta para poder realizar esa transición y darle esos segundos que le estamos especificando. Pero, por otro lado, también lo que podríamos hacer sería especificarle concretamente qué propiedad es la que está afectando. Por ejemplo, en este caso lo que estamos haciendo es que queremos que esté atento a mi propiedad 'transform'. Si además le estuviera especificando un tamaño en concreto o le estuviera especificando un color en concreto, también podría decirle aquí que quiero que la transición me la haga sobre el 'height' o que me la haga sobre mi 'background'. De esta manera, vamos a tener todo tipo de potestad sobre cada una de las propiedades de CSS que nosotros le estemos indicando. El tiempo: pueden ser o segundos o fracciones de segundo. Si yo le pongo un segundo a que mi imagen se mueva cuando está encima –¿veis?– en este caso me está aplicando la transición en todas mis propiedades de CSS. Si yo le dijera que me lo hiciera sobre el 'height', solo me aplicaría ese segundo sobre la propiedad 'height'. Si solo sobre la propiedad 'transform'... ¿Veis? La propiedad 'transform' sí que tiene ese segundo, pero el 'background' y el 'height', no. Si pongo todas, lo que va a hacer es automáticamente gestionar todas las propiedades y así es como funciona el 'transition'.

CSS avanzado: 12 trucos

Descubre con estos 12 ejemplos cómo abordar los diseños y plantearlos para construir estructuras estándares de HTML5 con efectos CSS3 útiles en nuestro día a día como maquetadores.

1:04 horas (15 Videos)
Actualmente no hay comentarios.
 
Software:
Fecha de publicación:6/09/2016

Este curso video2brain está disponible como descarga y para ser visualizado online. ¡Pero no hace falta que decidas entre las dos opciones! Al comprar el curso, disfrutarás de ambas posibilidades.

La descarga te permite ver las lecciones sin estar conectado/a a internet y supone una navegación fácil y ágil entre capítulo y capítulo. Si vas a trabajar en diferentes ordenadores o si no quieres descargarte el curso completo, entra en la web con tus datos de acceso y disfruta directamente de tus vídeos online. Te deseamos que disfrutes de este curso y te resulte de mucha utilidad.

Estamos a tu disposición si tienes cualquier tipo de duda o pregunta.