Conociendo CSS3 - Animaciones

Hola, queridos lectores. Desde hoy comenzaré a mostrar todo el poder de CSS3, pero antes de comenzar les pido mil disculpas por haberme ausentado unos días, ya que en mi universidad rendí mis últimos exámenes,  pero bueno vamos al grano, lo que a ustedes les interesa.

Con CSS3 podemos hacer muchas cosas, como lo son las transiciones, animaciones, efectos de textos, transformaciones 2D, 3D, etc. Para empezar les demostrare una animación que realisé para ustedes.

DemoOcultar

En este demo he animado únicamente imágenes, y para crear estas animaciones debemos conocer la regla llamada @keyframes, la cual es muy sencilla, por ejemplo de esta manera he animado el sol.

#sol {
width: 100px;
height: 100px;
position: fixed;
top: 60px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1Y_lIvQEX11NyWu5uivoYV-latJIzgQ30l1lx8lA_ndsJta-KrnthWEllgIuVXCDcocYaYINQEGhBQD7C5MDSyZZzGfkr0OgK8dl9q58N60BZ_uhpKN6s2AEQW5r7rZBUwzaKlo3jp0jZ/s100/sol.png);
animation: sol 5s;
-webkit-animation: sol 5s;
-o-animation: sol 5s;
-moz-animation: sol 5s;
z-index: 10;
margin-left: -139px;
}

@keyframes sol
{
0% {top:500px;}
100% {top:60px;}
}
@-webkit-keyframes sol
{
0% {top:500px;}
100% {top:60px;}
}
@-o-keyframes sol
{
0% {top:500px;}
100% {top:60px;}
}
@-moz-keyframes sol
{
0% {top:500px;}
100% {top:60px;}
}

Les explico el código:

1. Como primer punto le he dado valores básicos para su diseño, como un width, height, background, etc.
2. Uno de los puntos claves es "animation: sol 5s;" Simplemente le daremos un nombre a nuestra animación y la duración de ella, en este caso es de 5 Segundos.
3. El siguiente punto clave es "@keyframes sol" Lo que estamos haciendo acá es asociar el @keyframes a la animación llamada "sol" que generamos anteriormente.
4. Y dentro de "@keyframes sol" hemos agregado la forma en que se animara nuestro "@keyframes" llamado "sol". En que cuando este a 0% estará ubicado desde arriba hacia abajo unos 500px; "top: 500px;" de esta manera acercándose a 100% la animación ira disminullendo los pixeles de distancia desde arriba hacia abajo llegando a los 60px "top: 60px;"

También podemos crear animaciones repitiéndose infinitamente. Como es el caso de las nubes y los aviones, un caso en partícular es el del avión azul.

#avion1 {
width: 250px;
height: 100px;
position: fixed;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZfhL8zoMPUp8veFIvCh2_RCB-XqAHFTPqCs2Ll8QGarGAnNXQwnvqnPfCs2KusxQ2vMOdAHQFN3dv7I287Y5_sBg3rRWVG5-IqKItrfkr_t_9YmQbkeitnAAZ5qlq_BVRnhsqCn-HRe73/s250/Avion1.png);
animation: avion1 20s infinite;
-o-animation: avion1 20s infinite;
-moz-animation: avion1 20s infinite;
-webkit-animation: avion1 20s infinite;
}
@-webkit-keyframes avion1
{
0% {left:-20%;bottom:0px;}
100% {left:105%;bottom:500px;}
}
@keyframes avion1
{
0% {left:-20%;bottom:0px;}
100% {left:105%;bottom:500px;}
}
@-moz-keyframes avion1
{
0% {left:-20%;bottom:0px;}
100% {left:105%;bottom:500px;}
}
@-o-keyframes avion1
{
0% {left:-20%;bottom:0px;}
100% {left:105%;bottom:500px;}
}

Solo agregando en el nombre de la animación la opción "infinite" quedando en este caso de esta manera "animation: avion1 20s infinite;".

A continuación jugaremos con algo simple para poder comprender con sencillos ejemplos:

#simple1
{
width:100px;
height:100px;
margin: auto;
background:red;
animation: simple1 5s infinite;
-moz-animation: simple1 5s infinite;
-webkit-animation: simple1 5s infinite;
-o-animation: simple1 5s;
}

@keyframes simple1
{
from {background:red;}
to {background:yellow;}
}

@-moz-keyframes simple1
{
from {background:red;}
to {background:yellow;}
}

@-webkit-keyframes simple1
{
from {background:red;}
to {background:yellow;}
}

@-o-keyframes simple1
{
from {background:red;}
to {background:yellow;}
}

#simple2
{
width:100px;
height:100px;
margin: auto;
background:red;
animation:simple2 2s infinite;
-moz-animation:simple2 2s infinite;
-webkit-animation:simple2 2s infinite;
-o-animation:simple2 2s infinite;
}

@keyframes simple2
{
0%   {background:red;}
25%  {background:yellow;}
50%  {background:blue;}
100% {background:green;}
}

@-moz-keyframes simple2
{
0%   {background:red;}
25%  {background:yellow;}
50%  {background:blue;}
100% {background:green;}
}

@-webkit-keyframes simple2
{
0%   {background:red;}
25%  {background:yellow;}
50%  {background:blue;}
100% {background:green;}
}

@-o-keyframes simple2
{
0%   {background:red;}
25%  {background:yellow;}
50%  {background:blue;}
100% {background:green;}
}

#simple3
{
width: 100px;
height: 100px;
position: relative;
background: red;
border-radius: 50%;
animation:simple3 10s infinite  linear;
-moz-animation:simple3 10s infinite linear;
-webkit-animation:simple3 10s infinite linear;
-o-animation:simple3 10s infinite linear;
}

@keyframes simple3
{
0%   {left: 0%;top: 0%;}
50%  {left: 50%;top: 50%;}
100% {left: 100%;top: 0%;}
}


@-moz-keyframes simple3
{
0%   {left: 0%;top: 0%;}
50%  {left: 50%;top: 50%;}
100% {left: 100%;top: 0%;}
}

@-webkit-keyframes simple3
{
0%   {left: 0%;top: 0%;}
50%  {left: 50%;top: 50%;}
100% {left: 100%;top: 0%;}
}

@-o-keyframes simple3
{
0%   {left: 0%;top: 0%;}
50%  {left: 50%;top: 50%;}
100% {left: 100%;top: 0%;}
}

También les comparto el código completo de la animación.

#sol {
width: 100px;
height: 100px;
position: fixed;
top: 60px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1Y_lIvQEX11NyWu5uivoYV-latJIzgQ30l1lx8lA_ndsJta-KrnthWEllgIuVXCDcocYaYINQEGhBQD7C5MDSyZZzGfkr0OgK8dl9q58N60BZ_uhpKN6s2AEQW5r7rZBUwzaKlo3jp0jZ/s100/sol.png);
animation: sol 5s;
-webkit-animation: sol 5s;
-o-animation: sol 5s;
-moz-animation: sol 5s;
z-index: 10;
margin-left: -139px;
}

@keyframes sol
{
0% {top:500px;}
100% {top:60px;}
}
@-webkit-keyframes sol
{
0% {top:500px;}
100% {top:60px;}
}
@-o-keyframes sol
{
0% {top:500px;}
100% {top:60px;}
}
@-moz-keyframes sol
{
0% {top:500px;}
100% {top:60px;}
}
#nube1 {
width: 100px;
height: 100px;
top: 86px;
position: fixed;
z-index: 11;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBHQvQIyuq0pYK0nQvsKkx8tXRcZ3OXoPQVBrXkLvIZM9UFJyD47Ae0GXqHT3X7qo4sCuZyUMNeICNJc_9eW7rtNVHRbiXeyPnIwluMh7cL3hBEee_WGDz-TUjX40cASMATRoJ-u04e28g/s100/nube1.png);
animation: nube1 35s infinite;
-webkit-animation: nube1 35s infinite;
-o-animation: nube1 35s infinite;
-moz-animation: nube1 35s infinite;
}
@-webkit-keyframes nube1
{
0% {left:-10%;}
100% {left:105%;}
}
@keyframes nube1
{
0% {left:-10%;}
100% {left:105%;}
}
@-o-keyframes nube1
{
0% {left:-10%;}
100% {left:105%;}
}
@-moz-keyframes nube1
{
0% {left:-10%;}
100% {left:105%;}
}
#nube2 {
width: 100px;
height: 100px;
top: 120px;
position: fixed;
z-index: 11;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMaGbizad3BpARTNEiq3Trs2atEHl3rSkbCMsw1twl6w30eUOOrHMTty5KRk3WH8GMWURxVAkPM8B3EAmobE4WP6nsyFYRs1vyW_XfI1Jm8Pfza6lzq3M3rSRvyh8TXBbIGgxeup0xM_BA/s100/nube3.png);
animation: nube2 80s infinite;
-webkit-animation: nube2 80s infinite;
-o-animation: nube2 80s infinite;
-moz-animation: nube2 80s infinite;
}
@-webkit-keyframes nube2
{
0% {left:-10%;}
100% {left:105%;}
}
@keyframes nube2
{
0% {left:-10%;}
100% {left:105%;}
}
@-o-keyframes nube2
{
0% {left:-10%;}
100% {left:105%;}
}
@-moz-keyframes nube2
{
0% {left:-10%;}
100% {left:105%;}
}
#nube3 {
width: 100px;
height: 100px;
top: 50px;
position: fixed;
z-index: 11;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitDQdTD_nZG6iTSPodxqr6SCg8BzaMVpwsFVgbH8Rf_qZ0SLkzbw3JSfgxDtHdeVL42bp9F4CRNzNsBCVH8cWwBIGaKBsJcZM4wFFBMqYUJU-Jfd62kH4lEvb55XB8wxYgPQP6LHB5eu2H/s100/nube4.png);
animation: nube3 150s infinite;
-o-animation: nube3 150s infinite;
-moz-animation: nube3 150s infinite;
-webkit-animation: nube3 150s infinite;
}
@-webkit-keyframes nube3
{
0% {right:-10%;}
100% {right:105%;}
}
@keyframes nube3
{
0% {right:-10%;}
100% {right:105%;}
}
@-o-keyframes nube3
{
0% {right:-10%;}
100% {right:105%;}
}
@-moz-keyframes nube3
{
0% {right:-10%;}
100% {right:105%;}
}
#nube4 {
width: 100px;
height: 100px;
top: 200px;
position: fixed;
z-index: 11;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitDQdTD_nZG6iTSPodxqr6SCg8BzaMVpwsFVgbH8Rf_qZ0SLkzbw3JSfgxDtHdeVL42bp9F4CRNzNsBCVH8cWwBIGaKBsJcZM4wFFBMqYUJU-Jfd62kH4lEvb55XB8wxYgPQP6LHB5eu2H/s100/nube4.png);
animation: nube4 200s infinite;
-o-animation: nube4 200s infinite;
-moz-animation: nube4 200s infinite;
-webkit-animation: nube4 200s infinite;
}
@-webkit-keyframes nube4
{
0% {left:-10%;}
100% {left:105%;}
}
@keyframes nube4
{
0% {left:-10%;}
100% {left:105%;}
}
-o-@keyframes nube4
{
0% {left:-10%;}
100% {left:105%;}
}
-moz-@keyframes nube4
{
0% {left:-10%;}
100% {left:105%;}
}
#avion1 {
width: 250px;
height: 100px;
position: fixed;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZfhL8zoMPUp8veFIvCh2_RCB-XqAHFTPqCs2Ll8QGarGAnNXQwnvqnPfCs2KusxQ2vMOdAHQFN3dv7I287Y5_sBg3rRWVG5-IqKItrfkr_t_9YmQbkeitnAAZ5qlq_BVRnhsqCn-HRe73/s250/Avion1.png);
animation: avion1 20s infinite;
-o-animation: avion1 20s infinite;
-moz-animation: avion1 20s infinite;
-webkit-animation: avion1 20s infinite;
}
@-webkit-keyframes avion1
{
0% {left:-20%;bottom:0px;}
100% {left:105%;bottom:500px;}
}
@keyframes avion1
{
0% {left:-20%;bottom:0px;}
100% {left:105%;bottom:500px;}
}
@-moz-keyframes avion1
{
0% {left:-20%;bottom:0px;}
100% {left:105%;bottom:500px;}
}
@-o-keyframes avion1
{
0% {left:-20%;bottom:0px;}
100% {left:105%;bottom:500px;}
}
#avion2 {
width: 250px;
height: 100px;
position: fixed;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfuk9hgvyOeYsgk55M4h7Tf5XCAlML8voC4NckRFEoNzzacF-8YwGSKCOgG0ZNQbgmo_pEj_yl0ppVLhWs1LvOlh8fJSzj4fLZCeswHiw5xOZ_kkv5toqG8b1f5ibJGBy8Sq5B4fhvvqZj/s250/Avion2.png);
animation: avion2 10s infinite;
-o-animation: avion2 10s infinite;
-moz-animation: avion2 10s infinite;
-webkit-animation: avion2 10s infinite;
}
@-webkit-keyframes avion2
{
0% {right:-20%;bottom:0px;}
100% {right:105%;bottom:500px;}
}
@keyframes avion2
{
0% {right:-20%;bottom:0px;}
100% {right:105%;bottom:500px;}
}
@-moz-keyframes avion2
{
0% {right:-20%;bottom:0px;}
100% {right:105%;bottom:500px;}
}
@-o-keyframes avion2
{
0% {left:-20%;bottom:0px;}
100% {left:105%;bottom:500px;}
}

Bueno espero que le sirva como conocimiento para sus web y seguiremos viendo mas cosas sobre CSS3, así que prepárense. Saludos malignos, un gran abrazo.