Lo cual nos permite darle un toque animado a nuestras paginas, sin javascript, y de paso de una manera sumamente sensilla.
Soporte de los Navegadores.
Este característica es soportada por Chrome, Firefox, Opera, Safari, IE10. cada uno con su correspondiente prefijo. http://caniuse.com/#feat=css-transitions
Como funciona?
Esta nueva funcionalidad hace que la modificación de las propiedades de un elemento se hagan de manera gradual, y estas modificaciones tienen que ocurrir por un evento o tiene que suceder algo que las desencadene. Para usarlas debemos especificar la duración de la transición en segundos solamente, aparte podemos especificar el delay, el tipo de efecto de la transición: linear, ease, ease-in, ease-out, ease-in-out y cubic-bezier(n,n,n,n) que permite crear nuestra propia animación, ademas también podemos especificar a que propiedad vamos a aplicar cada animación.
Syntax
transition: propiedad duración efecto-transición (delay|initial|inherit);
- Propiedad: es la propiedad a la cual se le va a aplicar la transición.
- Duración el tiempo que va a durar la transición.
- Efecto-transicion: la funcion que se va a aplicar en el tiempo espacio.
- delay: seria el tiempo que va a tardar la transición en iniciar.
- initial: estable esta propiedad a su valor inicial.
- inherit: hereda la propiedad de su padre.
Funciones
- transition-delay
- transition-duration
- transition-property
- transition-timing-function
Ejemplo: http://bomba1990.pythonanywhere.com/sosinformatico/js/css3-transition
.prueba{
width:150px;
height:100px;
border:1px solid red;
margin:30px;
}
#prueba1{transition: 1s ease-in-out; }
#prueba1:hover{
transform: rotate(30deg);
-webkit-transform: rotate(30deg);
-moz-transform: rotate(30deg);
-o-transform: rotate(30deg);
}
#prueba2{transition: 1s ease-out, width 2s cubic-bezier(.03,1.77,1,-0.67); }
#prueba2:hover{
width:500px;
transform: translate(20px,20px);
-webkit-transform: translate(20px,20px);
-moz-transform: translate(20px,20px);
-o-transform: translate(20px,20px);
}
Para crear sus propias curvas de animación con la función cubic-bezier les recomiendo: http://cubic-bezier.com
