1

Aprendiendo CSS3 – Transiciones

22Abr
en CSS, CSS 3, Desarrollo web, Tutoriales

En este tutorial aprenderemos cómo hacer transiciones a nuestros objetos. Con este tipo de efecto podemos crear vistosas animaciones solo con css3.

Vamos a preparar nuestra página base con una imagen que animaremos


<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>Transitions</title>
        <style>
            .photo img {
            }
        </style>
    </head>
    <body>
        <div class="photo"><img src="cake.jpg" /></div>
    </body>
</html>

La primera animación que probaremos será  un cambio de transparencia. Para eso en el selector de la imagen le agregamos lo siguiente.

.photo img {
    opacity:.5;
}

Para crear la animación, hacemos un selector nuevo sobre la imagen con la seudoclase :hover, esto para que se anime cuando el cursor esté encima. En este selector vamos a poner el nuevo estado que tendrá la imagen y utilizaremos las propiedades tipo transition para controlar la animación.

transition-property: Determina sobre que propiedad css se aplica la transición. Por defecto son todas (all). Si se quieren definir un grupo de propiedades, se separan por comas. Ejemplo

transition-property: width, font-size, border-radius;

transition-duration: El tiempo empleado en desarrollarse la transición. Puede ser en segundos: 2s o en milisegundos: 1200ms.

transition-delay: El retardo o tiempo que trascurre entre la acción que desencadena la transición y el inicio de la misma. Esto es, el retraso con el que comienza la transición.

transition-timing-function: Cómo se desarrolla la transición en el tiempo (Aceleración o desaceleración). Las funciones pueden ser:

ease-in: Aceleración

ease-out: Desaceleración

steps: La transición no es lineal sino a saltos. Puede ser:

steps(Nº) donde Nº (un valor numérico) son los saltos que se producen en la transición.

steps(Nº, start) Indica el nº de saltos y que se realiza al inicio de cada fracción de tiempo.

steps(Nº, end) Lo mismo que el anterior, pero la transición ocurre al final de cada fracción de tiempo. Es el valor por defecto para «steps».

Un ejemplo para cambiar la transparencia, rotar y aumentar la imagen de forma animada.

.photo img:hover {
    opacity:1;
    transform: rotate(2deg) scale(1.2);
    transition-duration: 1s;
    transition-timing-function: ease-in;
}

También podemos utilizar la propiedad transition como forma resumida para especificar todas o algunas de las propiedades antes mencionadas.

.photo img:hover {
    opacity:1;
    transform: rotate(2deg) scale(1.2);
    transition: transform 2000ms ease-in, opacity 1s linear;
}

Para dar soporte a los navegadores debemos utilizar los prefijos privativos.

.photo img:hover {
    opacity:1;
    transform: rotate(2deg) scale(1.2);
    transition: transform 2000ms ease-in, opacity 1s linear;
    -moz-transition: transform 2000ms ease-in, opacity 1s linear;
    -webkit-transition: transform 2000ms ease-in, opacity 1s linear;
    -o-transition: transform 2000ms ease-in, opacity 1s linear;
}

Para que la animación también ocurra cuando quitamos el cursor de encima, debemos poner la transición también en el selector de la imagen. Todo el código quedaría asi:

.photo img:hover {
    opacity:1;
    transform: rotate(2deg) scale(1.2);
    transition: transform 2000ms ease-in, opacity 1s linear;
    -moz-transition: transform 2000ms ease-in, opacity 1s linear;
    -webkit-transition: transform 2000ms ease-in, opacity 1s linear;
    -o-transition: transform 2000ms ease-in, opacity 1s linear;
}

.photo img {
    opacity:.5;
    transition: width 500ms ease-in, opacity 1s linear;
    -moz-transition: transform 500ms ease-in, opacity 1s linear;
    -webkit-transition: transform 500ms ease-in, opacity 1s linear;
    -o-transition: transform 500ms ease-in, opacity 1s linear;
}

Saludos y hasta la próxima…

Etiquetado en:

1 Comentario

  1. zico dice:

    Sería bueno que pusieran al final del post la imagen con el código CSS aplicado para que todos veamos como queda.

Dejar un comentario

¿Eres humano? Entonces resuelve esta operación: * Límite de tiempo se agote. Por favor, recargar el CAPTCHA por favor.