Práctica 7

Transitions

Transition

Las transiciones permiten cambiar las propiedades css de los elementos de una pagina web y se realicen esos cambios a diferentes velocidades, según se especifique la propiedad.

Una transición esta compuesta por un inicio y un final donde se debe especificar en cada etapa una propiedad para que se produzcan cambios secuenciales.

Se puede especificar en una única etiqueta de css el funcionamiento del inicio y del final de la transición utilizando la propiedad transition.

Sintaxis:

transition: transition-property transition-duration transition-timing-function transition-delay;

transition: all 5s ease 3s

Transitions-timing-function

Transition-timing-function

La propiedad timing-functión especifica la curva de velocidad del efecto de la transición.

Esta propiedad permite cambiar a una transición su velocidad durante la transición.

Sintaxis:

ease: Valor por defecto. La animación empieza lenta, se vuelve rápida y acaba lenta.
ease-in: La animación empieza lenta.
ease-out: La animación acaba lenta.
ease-in-out: La animación empieza y acaba lenta.
linear: La animación tiene la misma velocidad de principio a fin
step-start: Cambia del estado inicial al final sin ningún paso intermedio
step-end: Cambia del estado inicial al final sin ningún paso intermedio, el tiempo que tarda en cambiar depende del tiempo de la transición.
steps(Numero,end): Cambia del estado inicial al final siguiendo un número de pasos indicados

Transition-timing-function: ease

Valor por defecto. La animación empieza lenta, se vuelve rápida y acaba lenta.

Sintaxis:

transition-timing-function: ease;

ease

Transition-timing-function: ease-in

La animación empieza lenta.

Sintaxis:

transition-timing-function: ease-in;

ease-in

Transition-timing-function: ease-out

La animación acaba lenta.

Sintaxis:

transition-timing-function: ease-out;

ease-out

Transition-timing-function: ease-in-out

La animación empieza y acaba lenta.

Sintaxis:

transition-timing-function: ease-in-out;

ease-in-out

Transition-timing-function: linear

La animación tiene la misma velocidad de principio a fin

Sintaxis:

transition-timing-function: linear;

linear

Transition-timing-function: step-start

Cambia del estado inicial al final sin ningún paso intermedio

Sintaxis:

transition-timing-function: step-start;

step-start

Transition-timing-function: step-end

Cambia del estado inicial al final sin ningún paso intermedio, el tiempo que tarda en cambiar depende del tiempo de la transición.

Sintaxis:

transition-timing-function: step-end;

step-end

Transition-timing-function: steps()

Cambia del estado inicial al final siguiendo un número de pasos indicados

Sintaxis:

transition-timing-function: steps(número de pasos,end);

steps(6,end)

Transition-delay

transition-delay

La propiedad delay especifica el tiempo que espera antes de ejecutarse la transición, pueden especificarse tanto segundos como milisegundos.

Sintaxis:

transition-delay: time|initial|inherit;

time: Tiempo escrito por el usuario en segundos
initial: toma el valor por defecto
inherit: hereda el tiempo especificado en el elemento padre

delay = 2s , 5ms

Transition-duration

transition-duration

La propiedad duration especifica el tiempo que dura la transición, pueden especificarse tanto segundos como milisegundos. Si no se especifica una duración de la transición, el efecto se realizará instantaneamente.

Sintaxis:

transition-duration: time|initial|inherit;

time: Tiempo escrito por el usuario en segundos
initial: toma el valor por defecto
inherit: hereda el tiempo especificado en el elemento padre

duration = 5s (solo en hover)

duration = 5s(sin hover) duration = 1s (al hover)

Transition-property

transition-property

La propiedad property especifica la o las propiedades de un elemento html a las que se le aplicará una transición,
La sintaxis para especificar qué propiedades se les aplicará una transición se realiza de la siguiente forma:

Sintaxis:

transition-property: none | all | property | initial | inherit;

none: No se aplica efectos de transición
all: Se aplica los efectos de transición a todas las propiedades del elemento
property: Nombre de la propiedad
initial: Toma el valor por defecto
inherit: Hereda el tiempo especificado en el elemento padre

property = width;