POSTS ETIQUETADOS : transiciones en css

Efecto de movimiento un poco más complejo con CSS3: La propiedad animation

Si hace poco vimos cómo animar mediante transition ahora os pongo un ejemplo con animation, para animar elementos sin necesidad de javascript. Una de las particularidades de la propiedad de CSS3 es que todavía no es estándar, lo que nos obliga a definirla prácticamente para todos los motores de renderizado en navegadores. Por ejemplo:

#santa{
position:relative;
left:110%;
-moz-animation:volar 20s infinite;
-webkit-animation: volar 20s infinite;
-o-animation:volar 20s infinite;
-ms-animation:volar 20s infinite;
-khtml-animation:volar 20s infinite;
animation:volar 20s infinite;
}

Donde aparte de los motores definimos el nombre de la animación, volar, el tiempo, 20s, y si añadimos infinite se reproducirá indefinidamente en el tiempo.

Podemos determinar los keyframes donde la animación cambia de posición, tamaño, color, etc. Es decir, en qué momento de la animación se produce un cambio… donde en definitiva establecemos qué propiedad de CSS va a actuar en cada momento. Al carecer de estandarización hay que definirlo también para cada navegador. Por supuesto el nombre de la animación debe coincidir con el nombre anterior, os pongo un ejemplo:

@-moz-keyframes volar{
0%{
left:-150px;
top:5px;
width:80px;
}
25%{
top:220px;
width:50px;
}
50%{
top:90px;
width:40px;
-moz-transform:rotate(-45deg);
-webkit-transform:rotate(-45deg);
}
75%{
top:230px;
width:65px;
-moz-transform:rotate(0deg);
-webkit-transform:rotate(0deg);
}
100%{
margin-left:100px;
top:90px;
width:25px;
}
}

@-webkit-keyframes volar{
0%{
left:-150px;
top:5px;
width:80px;
}
25%{
top:220px;
width:50px;
}
50%{
top:90px;
width:40px;
-moz-transform:rotate(-45deg);
-webkit-transform:rotate(-45deg);
}
75%{
top:230px;
width:65px;
-moz-transform:rotate(0deg);
-webkit-transform:rotate(0deg);
}
100%{
margin-left:100px;
top:90px;
width:25px;
}
}

@-o-keyframes volar{
0%{
left:-150px;
top:5px;
width:80px;
}
25%{
top:220px;
width:50px;
}
50%{
top:90px;
width:40px;
-moz-transform:rotate(-45deg);
-webkit-transform:rotate(-45deg);
}
75%{
top:230px;
width:65px;
-moz-transform:rotate(0deg);
-webkit-transform:rotate(0deg);
}
100%{
margin-left:100px;
top:90px;
width:25px;
}
}

@-ms-keyframes volar{
0%{
left:-150px;
top:5px;
width:80px;
}
25%{
top:220px;
width:50px;
}
50%{
top:90px;
width:40px;
-moz-transform:rotate(-45deg);
-webkit-transform:rotate(-45deg);
}
75%{
top:230px;
width:65px;
-moz-transform:rotate(0deg);
-webkit-transform:rotate(0deg);
}
100%{
margin-left:100px;
top:90px;
width:25px;
}
}

@-khtml-keyframes volar{
0%{
left:-150px;
top:5px;
width:80px;
}
25%{
top:220px;
width:50px;
}
50%{
top:90px;
width:40px;
-moz-transform:rotate(-45deg);
-webkit-transform:rotate(-45deg);
}
75%{
top:230px;
width:65px;
-moz-transform:rotate(0deg);
-webkit-transform:rotate(0deg);
}
100%{
margin-left:100px;
top:90px;
width:25px;
}
}

@keyframes volar{
0%{
left:-150px;
top:5px;
width:80px;
}
25%{
top:220px;
width:50px;
}
50%{
top:90px;
width:40px;
-moz-transform:rotate(-45deg);
-webkit-transform:rotate(-45deg);
}
75%{
top:230px;
width:65px;
-moz-transform:rotate(0deg);
-webkit-transform:rotate(0deg);
}
100%{
margin-left:100px;
top:90px;
width:25px;
}
}

Por último sólo quedará darle la clase o ID al elemento que queremos animar:


<img id="santa" alt="" src="img/santa-volador2.png" />

Pongo como ejemplo el Papá Noel volador que sale en esta página. Las propiedades left y position de #santa son para que funcione el efecto de la animación correctamente.

Efecto de movimiento sencillo con CSS3: La propiedad transition

Con la adopción de la mayoría de navegadores de los atributos propios de CSS3 se abren puertas para hacer más rápido los efectos :hover. Si hasta no hace mucho lo normal era utilizar sprites para simular cambios de color o movimiento ahora es más rápido (y más ligero) hacerlo mediante transition.

Si quiero que un efecto :hover haga una transición suave marco primero las propiedades que van a cambiar al pasar el ratón por encima (con margin, padding, etc.) o cambio de color (con background-color, por ejemplo) o por qué no, ambas.

a:hover {margin-top:3px; background-color:red;}

Luego añado la propiedad transition para todos los navegadores disponibles:

a:hover {
-webkit-transition: all 300ms ease-in-out;
-moz-transition: all 300ms ease-in-out;
-o-transition: all 300ms ease-in-out;
transition: all 300ms ease-in-out;
}
  • Donde all marca todo el elemento pero podría cambiar modificando sólo el ancho (width), el alto (height), el color (color), etc.
  • 300ms es la duración en milisegundos, podríamos utilizar 1s para un segundo, 2s, etc.
  • ease-in-out es el efecto easing y podría sustituirse ease-in o cualquier otro elemento de esta propiedad.

Podéis pegarle un vistazo a todas los efectos disponibles con una demo y su explicación en easings.net y obtener un listado de todas sus propiedades y compatibilidad en el enlace de la w3schools.

Easings.net Transitions en CSS3