Transiciones de CSS

Proporcionan una forma de animar los cambios de las propiedades de CSS evitando los cambios de manera brusca e instantánea.

Mediante las transiciones podemos reducir el intervalo de tiempo en el que queremos que un elemento cambie de aspecto haciendo que sucedan de forma gradual, como por ejemplo, el cambio de un botón de un color a otro o así mismo su apariencia total como tal.

Las transiciones se controlan mediante la propiedad**_ t r a n s i t i o n_**, con el gran poder de controlar sus componentes de manera individual usando sub propiedades o parámetros.

**NOTA: **No todas las propiedades CSS son compatibles con las transiciones.

Ahora te mostrare las formas de uso de los parámetros para las transiciones con los respectivos ejemplos, te recomiendo que en casa apliques cada parámetro con diferentes ejemplos y diferentes valores para que te apropies del tema.

En este caso yo nada mas te mostrare la forma de utilizarlo mediante código y tu lo harás en casa con tus propios ejemplos.

NOTA: Si la duración de la transición no es especificada, la transición no tendrá efecto ya que el valor por defecto del tiempo de la transición es 0.
También el efecto de transición comenzara cuando la propiedad CSS que se le especifique cambie de valor
Esfecificado

que el nuevo valor para la propiedad width cuando se pase por el elemento
ejemplo:

.divname:hover {
	Width: 500px;
}
.divname {
	Width: 100px;
	Height: 100px;
	Background: red;
	Transition: width 2s;
}

**

• Transition-property: ** Su función es especificar mediante “all” o “none” a las propiedades sobre los que se va a aplicar o realizar la transición, cabiendo aclarar que no todas las propiedades CSS son compatibles con las transiciones. Donde el valor “all” indica que queremos que se aplique en todas la propiedades y el valor “none” en ninguna.
  Ejemplo:

Divname {
	Transition: all 2s;
}

**

• Transition-duration:** Esta se encarga de especificar o definir el tiempo en que sucederán las transiciones, pidiendo así especificar una única duración para todas la propiedades o valores diferentes que permitan que cada transición ocurra en un tiempo distinto.
  Ejemplo:

.divname {
	Width: 100px;
	Height: 100px;
	Background: red;
	Transition: width 2s height 3s;
}

- Transition-timing-funtion: Esta propiedad especifica la velocidad de la curva de transición del efecto son los siguientes valores
○ Ease: especifica una transición de inicio lento, luego rápido y con final lento
○ Linear: mantiene la velocidad de inicio a fin
○ Ease-in: comienza lento y finaliza con una velocidad constante
○ Ease-out: Inicia con velocidad constante y finaliza de lentamente
○ Ease-in-out: Inicio y final lentos con inicio mas rápido que el fin.
Ejemplo:

#div1 {transition-timing-function: linear;}
#div2 {transition-timing-function: ease;}
#div3 {transition-timing-function: ease-in;}
#div4 {transition-timing-function: ease-out;}
#div5 {transition-timing-function: ease-in-out;}

-** Transition-delay: **esta propiedad especifica el retraso en segundos que demora el efecto de la transacción.

Ejemplo:
.divname {
	Transition-delay: 5s;
} 

De verdad espero que te haya servido!

Toda la información la saque del curso de desarrollo web online de platzi
Y ratifique la información de esta pagina
Click aqui
La cual recomiendo que veas explores a profundidad, ya que aquí esta todo lo relacionado con CSS.
Como** recomendación personal** te dejo y dejare en todos los tutoriales, es que cuando hagas un examen y no lo pases, mira los temas en los cuales te fue mal, los investigues, practiques y trates de enseñarlo al alguien mas, como por ejemplo, en este medio.

Si hay algún error háganmelo saber, me ayudara a resolverlo y a todos los interesados en el tema.