transition

Indica la evolución de un estado a otro de un elemento que queremos dar cierta animación

transition

transition-delay
transition-duration
transition-property
transition-timing-function

transition-property:

Indica que el nombre de la etiqueta CSS donde se va a realizar la transición del elemento.

Podemos decirle que sea todo --> all

transition-duration:

Indica el tiempo en segundos(s) o milisegundos(ms) que tarda la transición en ser ejecutada completamente.

transition-timing-function:

Especifica como una transición CSS debería progresar sobre la duración de cada ciclo.

ease:valor por defecto.Inicia lento, se acelera y termina decelerando.
ease-in:tiene un comienzo lento.
ease-out:tiene un final lento.
ease-in-out:inicio y final lento.
linear:misma velocidad inicio y fin.
step-start
step-end

transition-timing-function:

En las herramientas para desarrolador de Chrome, podemos definir una tabla Bezier específica, cómo?

Si hemos definido en un elemento la característica transition y hemos especificado un transition-timing-function nos saldrá en las características usadas un icono como este haciendo click sobre él, tendremos una tabla Bezer para poder definir una propia.

transition-timing-function:

Un enlace con ejemplos de valores y gráficas de Bezier lo podemos encontrar en este enlace:

http://easings.net/es#

Un enlace donde podemos crear nuestras propias gráficas Bezier

http://cubic-bezier.com/

transition-delay:

Indica el tiempo en segundos(s) o milisegundos(ms) que tarda la transición en empezar a ser ejecutada completamente.

ejemplo

div {
  transition: all 0.5s ease;
  background: red;
  padding: 10px;
}
div:hover {
  background: green;
  padding: 20px;
}

ejemplo

div:hover {
  transition-property: background, padding;
  transition-duration : 0.5s , 2s;
  transition-delay: 1s;
  transition-timing-function: ease-in;
/* transition: background 0.5s ease-in 1s, padding 2s ease-in 1s; */
  background: red;
  padding: 10px;
}
div {
  background: green;
  padding: 20px;
}

transition

No todos los elementos pueden recibir la característica transition. Estas si pueden:

background-color
background-position
border-color
border-width
border-spacing
bottom
clip
color
crop
font-size
font-weight

height
left
letter-spacing
line-height
margin
max-height
max-width
min-height
min-width
opacity
outline-color

outline-offset
outline-width
padding
right
text-indent
text-shadow
top
vertical-align
visibility
width
word-spacing
z-index

Para más slides sobre CSS:

https://bermartinv.github.io/css/files/taller/menu_taller.html

transition

By Bernardo Martín

transition

Bernardo Martín

UI Developer | CSS & Animation Developer | Frontend Developer

transition

transition

transition-property:

transition-duration:

transition-timing-function:

transition-timing-function:

transition-timing-function:

transition-delay:

ejemplo

ejemplo

transition

Para más slides sobre CSS:

transition

More from Bernardo Martín