INDICE

TRANSICIONES

ANIMACIÓN

FLEXBOX

GRID

Las transiciones permiten que los cambios de valores en las propiedades de un elemento sucedan de una forma gradual durante un periodo de tiempo determinado, es decir, nos permite suavizar el paso de un estado a otro de la interfaz, muy similar a una “animación”. Un ejemplo claro es el cambio de color del fondo de un botón cuando llevamos el ratón sobre él (hover), con una transición conseguimos que el cambio de color no se haga de forma brusca, sino que se produzca de forma gradual.

Agregando Transiciones con la propiedad Transition Para aplicar una transición a un elemento tenemos que utilizar la propiedad transition. Aunque están propiedad ya la podemos considerar un estándar, es recomendable el uso de prefijos para que funcione en versiones antiguas de los navegadores.

Parámetros

• Transition-property: Especifica el nombre de la propiedad CSS sobre el que se va a realizar el efecto de transición. Utilizamos ‘all’ si queremos que se aplique sobre todas las propiedades o ‘’none’ para ninguna. Debemos tener en cuenta que no todas las propiedades css son compatibles con las transiciones
• Transition-duration: Como su nombre indica, especifica la duración de la transición en segundos o milisegundos (ejemplo: 2s, 150ms).
• Transition-timing-function: Especifica la curva de velocidad de la transiciónn, es decir, si queremos que mantenga una velocidad constante, o un comienzo o final rápido, lento, etc. En concreto podemos utilizar los siguientes:

Transición Linear:

#tran1{
width: 100px;
height: 100px;
background: red;
overflow: hidden;
position: relative;
left: 20px;
padding: 10px;
}
#tran1:hover{
width: 700px;
transition-property: all;
transition-duration: 0.9s;
transition-timing-function: linear;
}

Transició Cubic-bezier:

#tran6{
width: 100px;
height: 100px;
background: red;
overflow: hidden;
position: relative;
left: 50px;
padding: 10px;
}
#tran6:hover{
width: 700px;
transition-property: all;
transition-duration: 0.9s;
transition-timing-function:cubic-bezier(0);
}

Linear

Ease

Ease-in

Ease-out

Ease-in-out

Cubic-bezier

Transition-delay