Skip to main content
CSS3

Transiciones animadas con CSS3

Por 16 diciembre, 2016Sin comentarios
Que son las transiciones de CSS3

Para mí, una de las mejoras de CSS3 son las transiciones animadas. Con esta nueva propiedad podemos dotar de animación y estilo una transición de un elemento cuando se produce una acción sobre él. Todo esto sin tener que recurrir a Javascript, Flash o frameworks como jQuery.

Un ejemplo lo tenemos con el botón. Con la pseudo clase :hover podemos cambiar el estilo del botón cuando pasamos el cursor por encima. El color de fondo, ancho, posición, etc… Esta sería la acción que requiere una transición. Con la propiedad transition conseguimos que ese cambio se haga con una animación más suave y vistosa. Podemos ajustar al maximo el efecto animado con cuatro propiedades:

TRANSITION-PROPERTY: Indicamos sobre que propiedad del elemento que se vaya a cambiar queremos poner la animación. Por ejemplo, width, height, top, margin, border, etc… Podemos poner all si queremos que se realice en todos.

TRANSITION-DURATION: Indicamos la duración completa de la animación y lo hacemos en segundos: 1s, 2s, 3s…

TRANSITION-TIMING-FUNCTION: Indicamos la curva de velocidad de la animación. Podemos hacer que empiece lento y acabe más rápido y viceversa, que tenga velocidad lineal, que empiece y acabe lento pero que acelere en el medio o una opción más reciente llamada cubic-bezier que nos permite meter 4 valores del 0 al 1 siendo el 0 el más lento y 1 el más rápido. Esta nos permite personalizar al máximo la velocidad de la transición. Estos serían todos los valores: ease, ease-in, ease-out, ease-in-out, linear y cubic-bezier. Si no indicamos nada el valor por defecto es ease.

TRANSITION-DELAY: Indicamos el retardo de la animación. Lo hacemos también en segundos. El valor por defecto es 0.

Como en casi cualquier propiedad tenemos un shorthand en el orden indicado. Además podemos poner varias animaciones separadas por una coma:

transition: background-color 1s ease-in 0.2s, width 1s cubic-rezier(0.2,0.6,0.6,0.2);

Lo malo de estas propiedades nuevas es que no están estandarizadas 100% por lo tanto pueden ser incompatibles con navegadores antigüos. Recomiendo usar los prefijos -webkit- y -moz-.

.boton{
   background-color: #CCC;
   color: white;
   padding: 10px 20px;
   border-width: 1px;
   border-color: #4b4b4b;
}
.boton:hover{
   background-color: #AAA;
   border-width: 3px;
   transition: all 1s ease-in-out 0.2s;
   -webkit-transition: all 1s ease-in-out 0.2s;
   -moz-transition: all 1s ease-in-out 0.2s;
}
Jairo Calero

Jairo Calero

Desarrollador web frontend y backend, especialista en webs app desarrolladas en PHP y Javascript. Experto en HTML, CSS3, PHP y Javascript con frameworks y librerías como jQuery, Angular y Bootstrap. Gestor de herramientas SEO como Google Analytics, Search Console, SEMrush o Hotjar. Email marketing y Big data.

Deja tu respuesta