Las transiciones en CSS3 funcionan de un modo similar a las animaciones, así que es recomendable leer previamente nuestro anterior tutorial "CSS3 Animations. Realizar animaciones con CSS". Realizar transiciones con CSS3 nos permite incorporar una animación al cambiar de un estilo a otro. Para ello deberemos especificar:
- La propiedad CSS a la que deseamos agregar un efecto.
- La duración del efecto.
Un ejemplo sencillo es realizar una transición entre dos estados de un link. El primer estado sería el estado digamos normal y el segundo cuando pasamos el puntero del ratón sobre él. Tendríamos un link:
<a href="#">Ver ejemplo</a>
Con la siguiente definición CSS:
a {
padding: 5px 10px;
background: #9c3;
}
a:hover {
background: #333;
}
Para realizar la transición:
a {
padding: 5px 10px;
background: #9c3;
-webkit-transition-property: background;
-webkit-transition-duration: 1s;
-webkit-transition-timing-function: ease;
-moz-transition-property: background;
-moz-transition-duration: 1s;
-moz-transition-timing-function: ease;
}
a:hover {
background: #333;
}
Ver ejemplo en funcionamiento » »
PROPIEDADES
- transition-property: la utilizamos para listar las propiedades que se cambiarán, separadas por comas.
- transition-duration: En esta propiedad especificamos el número de segundos o milisegundos que dura la transición.
- transition-timing-function: En esta propiedad podemos definir el modo en que se ejecutará nuestra animación. La curva de tiempo que se usa para calcular los diferente estados entre el inicio y el final. La opción por defecto es ease. Las otras opciones son: "linear", "ease-in", "ease-out", "ease-in-out", y "cubic-bezier".
- transition-delay determina el tiempo que transcurrirá antes de comenzar la transición. Su valor predeterminado es cero.
Podemos acortar significativamente la declaración utilizando una versión acortada de la misma:
a {
padding: 5px 10px;
background: #9c3;
-webkit-transition: background 1s ease;
-moz-transition: background 1s ease;
}
a:hover {
background: #333;
}
Las transiciones fueron desarrolladas inicialmente por los navegadores con motores WebKit (Safari y Chrome), pero en la actualidad también son soportadas por Firefox y Opera. He aquí una declaración revisada, añadiendo que el prefijo -o- para Opera, así como la propiedad real de CSS3. Esta última declaración es la que deberán ir asumiendo los navegadores en el futuro. Por ello la colocaremos en último lugar; para asegurarnos de que la implementación final triunfará sobre las demás.
a {
padding: 5px 10px;
background: #9c3;
-webkit-transition: background 1 ease;
-moz-transition: background 1 ease;
-o-transition: background 1 ease;
transition: background 1 ease;
}
a:hover {
background: #333;
}
El siguiente ejemplo es más complejo y vamos a animar varias propiedades
.caja1{
margin:10px;
border:1px solid #CCC;
/* Propiedades a animar */
width:100px;
height:100px;
background-color:#FF0000;
/* Final propiedades */
-webkit-transition-property: width, height, background-color;
-webkit-transition-duration: 0.5s, 1s, 1s;
-webkit-transition-timing-function: ease, ease-out, ease;
-webkit-transition-delay:0s ,0.5s, 1.5s;
-moz-transition-property: width, height, background-color;
-moz-transition-duration: 0.5s, 1s, 1s;
-moz-transition-timing-function: ease, ease-out, ease;
-moz-transition-delay:0s ,0.5s, 1.5s;
-o-transition-property: width, height, background-color;
-o-transition-duration: 0.5s, 1s, 1s;
-o-transition-timing-function: ease, ease-out, ease;
-o-transition-delay:0s ,0.5s, 1.5s;
transition-property: width, height, background-color;
transition-duration: 0.5s, 1s, 1s;
transition-timing-function: ease, ease-out, ease;
transition-delay:0s ,0.5s, 1.5s;
}
.caja1:hover{
width:400px;
height:200px;
background-color:#95d2ea;
}
Ver ejemplo en funcionamiento » »
Cuya versión reducida sería:
.caja1{
margin:10px;
border:1px solid #CCC;
/* Propiedades a animar */
width:100px;
height:100px;
background-color:#FF0000;
/* fin propiedades */
-webkit-transition: width 0.5s ease 0s, height 1s ease-out 0.5s, background-color 1s ease 1.5s;
-moz-transition: width 0.5s ease 0s, height 1s ease-out 0.5s, background-color 1s ease 1.5s;
-o-transition: width 0.5s ease 0s, height 1s ease-out 0.5s, background-color 1s ease 1.5s;
transition: width 0.5s ease 0s, height 1s ease-out 0.5s, background-color 1s ease 1.5s;
}
.caja1:hover{
width:400px;
height:200px;
background-color:#95d2ea;
}
Ver ejemplo en funcionamiento » »
