Habíamos visto que las transiciones en CSS tienen cuatro propiedades que las controlan de manera individual:
transition-property la utilizamos para listar las propiedades que se cambiarán, separadas por comas; por ejemplo:
transition-property la utilizamos para listar las propiedades que se cambiarán, separadas por comas; por ejemplo:
transition-property: background; transition-property: background-color; transition-property: background, width;
Ese lista no es obligatoria ya que, por defecto, el valor es all lo que significa que, salvo que lo indiquemos expresamente, la transición se hará sobre todas las propiedades que cambien. Por ejemplo, si tengo este DIV con un texto:
<div class="demoT">CSS3</div>
<style>
.demoT {
/* todas las propiedades normales que quiera poner */
background-color:#101921;
border: 6px solid #89A;
border-radius: 10px;
color: #EEE;
cursor: pointer;
font-size: 16px;
height: 50px;
margin: 0 auto;
padding-top: 20px;
text-align: center;
width: 100px;
/* acá irá la transición */
}
.demoT:hover {
/* estas son las propiedades que van a cambiar */
background-color: #606971;
border-radius: 150px;
color: #000;
font-size:64px;
height: 200px;
padding-top: 100px;
width: 300px;
/* acá irá la transición */
</style>en lugar de agrega esto para animarlo un poco:
transition-property: background-color, border-radius; color, font-size, height, padding-top, width; transition-duration: 2s;
puedo simplificarlo así:
transition-property: all; transition-duration: 2s;
o utilizar una sóla línea, separando los valores con un espacio, de manera similar a lo que hacemos con otras propiedades:
transition: all 2s;
El orden es:
transition: transition-property, transition-duration transition-timing-function transition-delay;
Así que en ese ejemplo, sólo habría que agregar los prefijos de los distintos navegadores lo que daría esto:
-moz-transition: all 2s; -webkit-transition: all 2s; -o-transition: all 2s;
CSS3
Cuando queremos anular la transición lo que utilizamos es el valor none:
transition: none;
transition-duration es lo que indica la velocidad, o sea, el tiempo que durará la transición y por defecto es cero; al igual que la anterior, si ponemos varios valores, estos se separan con comas:
transition-duration: 1s; transition-duration: 1s, 2s;
transition-timing-function es la más complicada de comprender; lo que hace es definir el modo en que se ejecutará esa transición; la curva de tiempo que se usa para calcular los diferente estados entre el inicio y el final. Por defecto, tiene el valor ease pero pueden usarse otros: linear, ease-in, ease-out, ease-in-out, cubic-bezier()
Ese valor por defecto genera una animación suave; digamos que, comienza despacio y luego se va ascelerando. El valor linear lo hace de modo constante y usando cubic-bezier() podemos llegar a controlar esa velocidad de manera exacta aunque compleja. Pueden ver y experimentar esto en Ceaser, una herramienta online para probar valores y posibles alternativas. Mientras tanto, en este ejemplo, basta poner el cursor encima para ver como, aún utilizando en todos ellos el mismo valor de tiempo, el resultado final cambia haciendo que algunas se ejecuten más rápido que otras:
Ese valor por defecto genera una animación suave; digamos que, comienza despacio y luego se va ascelerando. El valor linear lo hace de modo constante y usando cubic-bezier() podemos llegar a controlar esa velocidad de manera exacta aunque compleja. Pueden ver y experimentar esto en Ceaser, una herramienta online para probar valores y posibles alternativas. Mientras tanto, en este ejemplo, basta poner el cursor encima para ver como, aún utilizando en todos ellos el mismo valor de tiempo, el resultado final cambia haciendo que algunas se ejecuten más rápido que otras:
ease
linear
ease-in
ease-out
ease-in-out
cubic
Por último:
transition-delay determina el tiempo que transcurrirá antes de comenzar la transición y su valor inicial es cero.
Demasiada cosa, demasiado detalle pero todo es mucho más simple de lo que parece ya que, en realidad, para usos normales, basta saber que sólo necesitamos esto y nada más:
transition-delay determina el tiempo que transcurrirá antes de comenzar la transición y su valor inicial es cero.
Demasiada cosa, demasiado detalle pero todo es mucho más simple de lo que parece ya que, en realidad, para usos normales, basta saber que sólo necesitamos esto y nada más:
-moz-transition: all 1s; -webkit-transition: all 1s; -o-transition: all 1s;
ABCDEFGHIJKLMNÑOPQRSTUVWXYZ
Desde Blogger, podemos subirlos del mismo modo que hacemos con una imagen y con el mísmo ícono:
así que tuve que eliminar uno de ellos.
¿Listo? Repasamos, nos aseguramos de tener todo y ahora sí, desinstalamos el navegador indicando que se borre toda la información y datos personales guardados.
Podemos ir seleccionando las que queremos y para cada una de ellas deberemos dar autorización que dependerá del sistema, como utiliza 
Así parece, así dicen, así anuncian en 
