Ejercicios sobre animaciones CSS3 realizados en un evento en directo emitido en DesarrolloWeb.com con distintas demostraciones de las posibilidades de esta técnica del HTML5.
Durante ese evento que compartí con otras personas del equipo de DesarrolloWeb.com, realicé diversos ejemplos que quiero ahora publicar en este artículo. Realmente los ejemplos no son nada complicados, sino que sirven para ilustrar las posibilidades de las animaciones CSS3 a personas que no han trabajado nunca con esta utilidad relativamente nueva.
Ejemplo básico: mi primera animación CSS
En este ejemplo realizamos nuestra primera animación. Es muy simple, pero ya demuestra bien las posibilidades que tendremos a poco que dominemos este aspecto de las CSS3.Tenemos una capa "div" que tiene una imagen de fondo. Esa capa se mueve por la pantalla con tres "Keyframes". Los frames clave sirven para expresar los distintos estados de la animación y corresponden al mismo concepto que podrán haber aprendido otros desarrolladores en Flash o ex-flasheros como yo.
El código del ejemplo es el siguiente:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<title>GIRAR</title>
<style type="text/css">
#circulo {
background-image: url(circulo.png);
height: 100px;
position: relative;
width: 100px;
-webkit-animation:gira 3s alternate infinite;
}
@-webkit-keyframes gira
{
0% {top: 0px; left: 600px;-webkit-transform: rotate(0deg);}
50% {top: 130px; left: 200px; -webkit-transform: rotate(180deg);}
100% {top: 400px; left:600px; -webkit-transform: rotate(360deg);}
}
</style>
</head>
<body>
<div id="circulo"></div>
</body>
</html>
El enlace para ver este ejemplo en marcha es el siguiente: desarrolloweb.com/articulos/ejemplos/css/animaciones/girar.html
Ejemplo 2: efectos hover y diferentes bordes
En este segundo ejemplo ya hacemos algo un poco más complejo, y cargamos otros prefijos de navegadores distintos de Webkit, para que la animación sea compatible con más browsers.Como se puede ver, tenemos varias capas, con distintas clases. Todas tienen efectos de animación aplicados a los enlaces (etiqueta A), pero con las clases conseguimos que esos efectos varíen de una capa a otra.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
body {
padding: 10px 0 0 10px;
}
#contenedor {margin: 30px auto; width:960px;}
a {
display:inline-block;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
width:100px;
height:100px;
-webkit-border-radius:50px;
-moz-border-radius:50px;
border-radius:50px;
background-image:url(circulo.png);
background-repeat:no-repeat;
background-origin:border-box;
background-position:50% 50%;
border-width:50px;
border-color:rgba(0,0,0,0);
-webkit-transition:0.5s ease;
transition:0.5s ease;
margin:20px;
}
a:hover {
border-width:0;
border-color:rgba(0,0,0,0.5);
}
a.one {border-style:solid;}
a.two {border-style:dashed;}
a.san {border-style:dotted;}
a.yon {border:50px solid rgba(0,0,0,0.7);}
a.goo {border:50px dashed rgba(0,0,0,0.7);}
a.rok {border:50px dotted rgba(0,0,0,0.7);}
a.ryk {border:50px double rgba(0,0,0,0.7);}
a.yon:hover {border: 1px solid rgba(0,0,0,0.7);}
a.goo:hover {border: 1px dashed rgba(0,0,0,0.7);}
a.rok:hover {border: 1px dotted rgba(0,0,0,0.7);}
a.ryk:hover {border: 1px double rgba(0,0,0,0.7);}
a.x7,
a.x8,
a.x9 {
-webkit-border-radius:0;
-moz-border-radius:0;
border-radius:0;
}
a.x7 {border:50px solid rgba(0,0,0,0.7);}
a.x8 {border:50px dashed rgba(0,0,0,0.7);}
a.x9 {border:50px dotted rgba(0,0,0,0.7);}
a.x7:hover {border: 1px double rgba(0,0,0,0.7);}
a.x8:hover {border: 1px dashed rgba(0,0,0,0.7);}
a.x9:hover {border: 1px dotted rgba(0,0,0,0.7);}
</style>
</head>
<body>
<div id="contenedor">
<a class="one" href="#"></a>
<a class="two" href="#"></a>
<a class="san" href="#"></a>
<br>
<a class="yon" href="#"></a>
<a class="goo" href="#"></a>
<a class="rok" href="#"></a>
<a class="ryk" href="#"></a>
<br>
<a class="x7" href="#"></a>
<a class="x8" href="#"></a>
<a class="x9" href="#"></a>
</div>
</body>
</html>
Podemos ver este segundo ejemplo en el siguiente enlace: desarrolloweb.com/articulos/ejemplos/css/animaciones/hover.html
Esto es todo, espero que haya servido de utilidad a quien quiera que desee aprender esta faceta del HTML5. Recordar que en DesarrolloWeb.com hay muchos otros ejemplos y explicaciones de Animaciones CSS en el Manual de CSS3.