CSS3 Transitions
Ahora con CSS3 podemos agregar un efecto de transición sin utilizar animaciones Flash o librerías JavaScript.
Las transiciones CSS3 son efectos que permiten que un elemento cambie gradualmente de un estilo a otro.
Para ello, debe especificar dos cosas:
- Especificar la propiedad CSS que desea agregar un efecto.
- Especificar la duración del efecto.
Propiedades de las transiciones en CSS3:
- transition: Una propiedad abreviada para establecer las cuatro propiedades de transición en una sola propiedad.
- transition-property: Especifica el nombre de la propiedad CSS al que se aplica la transición.
- transition-duration: Define la el tiempo que tarda una transición en segundos. Por defecto =0.
- transition-timing-function: Describe cómo se calculará la velocidad durante una transición. Por defecto «ease».
- transition-delay: Define cuando la transición se iniciará. Por defecto 0.
En el ejemplo que vamos a ilustrar vamos a tener un contenedor o div que al pasar el ratón por encima (hover) se va a expandir hasta 980px a la derecha.
Necesitaremos los siguientes estilos:
section div {
width:100px;
height:100px;
background:red;
transition:width 2s;
-webkit-transition:width 2s; /* Safari */
}
section div:hover {
width:980px;
}
Y en el <body> añadiremos la sección a la que le vamos a aplicar el efecto:
<section> <div>Expándeme con transiciones CSS3</div> </section>
Autor
Escrito por Jose Aguilar - Director ejecutivo y tecnológico en JA Modules. Experto programador PrestaShop y Experto programador WordPress.
¿Buscas trabajo de programador?
2 respuestas a “CSS3 Transitions”
Deja una respuesta
Hola como estas.. muy bueno lo que haces
Hace rato que vengo viendo todo lo que se puede hacer con css3. Me gustaría hacer imágenes que cambien de dimensiones, utilizando esto, se podrán hacer??
Hola,
No lo he probado pero diría que si se puede cambiar las dimensiones de una imagen utilizando en el css3 el tag img.
Saludos