Este post es un guía básica donde te explicaré cómo utilizar las transiciones CSS para crear cambios graduales en los elementos de nuestra página web. En él vamos a ver todas las subpropiedades de la propiedades de transition.
Básicamente utilizamos transiciones CSS junto con eventos como :hover en; botones, div, formularios y otros elemento. El funcionamiento es sencillo, tenemos un estado inicial (fondo rojo) y un estado final (fondo azul) con transition nuestro navegador creará una transición de un color a otro.
Diferencias entre utilizar o no transiciones CSS
Con esta propiedad le daremos a nuestra web un estilo más moderno y elegante, mejorando la experiencia de usuario notablemente. Antes de empezar vamos a ver la diferencia entre utilizar o no transiciones en este ejemplo:
Sin transición
¿Cómo añadir transiciones CSS a un elemento?
Para añadir transiciones a un elemento tenemos que utilizar la propiedad transition en nuestra hoja de estilos CSS. También podemos usar estas subporpiedades:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
/* Código utilizado para la transición del primer ejemplo */ #ejemplo1 .conTransition { transition-property: all; transition-duration: 1.25s; transition-timing-function: ease; /* Valor por defecto*/ transition-delay: initial; /* Valor por defecto*/ } /* También podemos escribirlo así */ #ejemplo1 .conTransition { transition: all ease 1.25s; /* Como delay es 0. No hace falta declararlo */ } |
transition-property: Establecemos la propiedad de CSS que queremos añadir transición. Como por ejemplo: width, height, color, etc… También podemos utilizar all. Utilizando all estaremos añadiendo transiciones a todos las propiedades de nuestro elemento html.
transition-duration: Establecemos el tiempo o duración de nuestra animación. Este valor puede ser expresado en segundos o en milisegundos. Además puede tener decimales. Por ejemplo: 1s, 2.5s o 250ms.
transition-timing-function: Establecemos la curva de velocidad de la animación. Podemos utilizar estos valores.
- linear: La misma velocidad de principio a fin.
- ease: Inicio lento, transcurso rápido, final lento.
- ease-in: Incio lento y después se mantiene la velocidad.
- ease-in-out: Inicio y final lentos
cubic-beizer: Con cubic-beizer podemos personalizar la curva de velocidad de nuestras animaciones y transiciones. Te recomiendo esta web http://cubic-bezier.com/ donde puedes personalizar esta propiedad de un modo visual.
transition-delay: Establecemos el retardo o el delay. Es decir, el tiempo que tarda desde que ponemos el cursor encima hasta que se inicia la transición.
Algunos ejemplo más de transiciones CSS
Animando sólo una propiedad
Como te comentaba al principio del post, podemos seleccionar la propiedad que queremos dar una transición. En este ejemplo vamos aplicar transition al fondo pero no a border-radius
|
1 2 3 |
#ejemplo2 .conTransition{ transition:background ease 1.25s; } |
Aplicando un delay
Aplicamos un retarde de 0.75s cuando ponemos el cursor encima
|
1 2 3 |
#ejemplo3 .conTransition{ transition:background ease 1.25s 0.75s; } |
Animamos tres propiedades con valores diferentes
En este caso vamos a aplicar tres transiciones diferentes a la propiedad border-radius y background.
|
1 2 3 4 5 6 |
#ejemplo4 .conTransition{ transition: background ease 1.25s, border-radius ease-in 3s, width ease 0.25s; } |
Eliminar la transición cuando quitamos el cursor
Si queremos sólo aplicar transiciones únicamente cuando el cursor está encima del objeto pero que al quitarlo el objeto vuelva de golpe a su apariencia original, tendremos que añadir la propiedad transition sólo con el pseudoselector hover. Así:
|
1 2 3 4 |
#ejemplo5 .conTransition:hover{ transition:background ease 0.75s; border-radius:25%; } |
Ejemplos de transition-timming-function
Espero que te haya gustado este tutorial. Como ves, las transiciones CSS no son complicadas cuando conocemos su funcionamiento. Si te ha gustado este post te recomiendo que también leas: Como crear una animación con CSS y Diferencias entras animaciones y transiciones de CSS
0 comentarios
Trackbacks/Pingbacks