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