Diseño web con CSS para realizar transformaciones y animaciones

En el artículo anterior sobre useless machine de la serie de artículos sobre la máquina inútil activábamos transformaciones con la pseudoclase css :active del interruptor.

Para llegar a los demás elementos usábamos selectores de adyacencia. He comprobado que la doble adyacencia no funcionaba bien en Chrome y he cambiado el código usando el selector de hermano sin adyacencia (~), así que he cambiado

#interruptor:active +
#tapa + #allen{

por

#interruptor:active ~
#allen{

Ahora vamos a trabajar la animación. Tiene que tener los siguientes pasos: Cuando pulsemos el interruptor éste tiene que cambiar su posición a encendido, una vez encendido la caja se tiene que abrir y cuando se haya abierto lo suficiente el percutor girar. Cuando el percutor llegue a la posición del interruptor, se tiene que apagar y el percutor comenzar a bajar otra vez y la caja cerrarse para volver a estar como al principio.

La animación completa durará 4.6 segundos. Las animaciones se van a realizar con frames. Cada declaración de frames se tiene que repetir para cada navegador, por lo que el código es muy extenso, voy a poner solo la del percutor, para hacernos a la idea de como funciona. El resto de la animación se puede ver en el código fuente de la máquina funcionando.

@-moz-keyframes animaAllen{
0%{ -moz-transform: rotate(0deg); }
17%{ -moz-transform: rotate(0deg); }
50%{ -moz-transform: rotate(-90deg); }
83%{ -moz-transform: rotate(0deg); }
100%{ -moz-transform: rotate(0deg); }
}
@-webkit-keyframes animaAllen{
0%{ -webkit-transform: rotate(0deg); }
17%{ -webkit-transform: rotate(0deg); }
50%{ -webkit-transform: rotate(-90deg);
}
83%{ -webkit-transform: rotate(0deg); }
100%{ -webkit-transform: rotate(0deg);
}
}
@-o-keyframes animaAllen{
0%{ -o-transform: rotate(0deg); }
17%{ -o-transform: rotate(0deg); }
50%{ -o-transform: rotate(-90deg); }
83%{ -o-transform: rotate(0deg); }
100%{ -o-transform: rotate(0deg); }
}
@-ms-keyframes animaAllen{
0%{ -ms-transform: rotate(0deg); }
17%{ -ms-transform: rotate(0deg); }
50%{ -ms-transform: rotate(-90deg); }
83%{ -ms-transform: rotate(0deg); }
100%{ -ms-transform: rotate(0deg); }
}
@keyframes animaAllen{
0%{ transform: rotate(0deg); }
17%{ transform: rotate(0deg); }
50%{ transform: rotate(-90deg); }
83%{ transform: rotate(0deg); }
100%{ transform: rotate(0deg); }
}

Esta es sencilla, queremos que esté quieto hasta el 17% de los 4.6 segundos, que después gire 90ª llegando a 90 a la mitad de la animación y que vuelva a bajar, llegando abajo faltando todavía un 17% de tiempo para el final.

Hemos dicho los pasos de la animación, en porcentajes, porque no hemos especificado todavía la duración ni modo ni nada, eso se hace así:

#interruptor:active ~ #allen{
-moz-animation: animaAllen 4.6s linear
0s 1;
-webkit-animation: animaAllen 4.6s
linear 0s 1;
-o-animation: animaAllen 4.6s linear 0s
1;
-ms-animation: animaAllen 4.6s linear
0s 1;
animation: animaAllen 4.6s linear 0s 1;
}

Damos el nombre de la animación a usar, el tiempo total, la función de interpolación, el retardo en el inicio y el número de repeticiones.

Ahora llega el momento de mostrar el resultado final. Funciona en Firefox, Chrome, Safari y Opera modernos. Funcionará (al menos en teoría) en Internet Explorer 10. Al ser solo CSS tenemos el pequeño problema de que hay que dejar pulsado el ratón en el interruptor hasta que acaba la animación. Solucionaremos con javascript este problema, pero por ahora tenemos lo que buscábamos, ¡una Ultimate Useless Machine en CSS!.

#contenedorMaquina6{
width: 400px;
height: 300px;
margin-left: auto;
margin-right: auto;
margin-top: 200px;
}
#maquina6{
z-index:10;
width: 395px;
float: left;
position: absolute;
margin-top: 100px;
}
#tapa6{
z-index:9;
margin: 116px 0 0 184px;
position: absolute;
float: left;
width: 211px;
-moz-transform-origin: 100% 100%;
-webkit-transform-origin: 100% 100%;
-o-transform-origin: 100% 100%;
-ms-transform-origin: 100% 100%;
transform-origin: 100% 100%;
-moz-transition-property: -moz-transform;
-webkit-transition-property: -webkit-transform;
-o-transition-property: -o-transform;
-ms-transition-property: -ms-transform;
transition-property: transform;
-moz-transition-duration: 2s;
-webkit-transition-duration: 2s;
-o-transition-duration: 2s;
-ms-transition-duration: 2s;
transition-duration: 2s;
-moz-transition-function: linear;
-webkit-transition-function: linear;
-o-transition-function: linear;
-ms-transition-function: linear;
transition-function: linear;
}
#allen6{
float: left;
position: absolute;
z-index:2;
margin: 110px 0 0 120px;
}
#interruptor6{
float: left;
position: absolute;
z-index:3;
margin: 70px 0 0 157px;
cursor: pointer;
-moz-transform: rotate(-30deg);
-webkit-transform: rotate(-30deg);
-o-transform: rotate(-30deg);
-ms-transform: rotate(-30deg);
transform: rotate(-30deg);
-moz-transform-origin: 50% 100%;
-webkit-transform-origin: 50% 100%;
-o-transform-origin: 50% 100%;
-ms-transform-origin: 50% 100%;
transform-origin: 50% 100%;
}
#interruptor6:active{
-moz-animation: animaInterruptor 4.6s linear 0s 1;
-webkit-animation: animaInterruptor 4.6s linear 0s 1;
-o-animation: animaInterruptor 4.6s linear 0s 1;
-ms-animation: animaInterruptor 4.6s linear 0s 1;
animation: animaInterruptor 4.6s linear 0s 1;
}
#interruptor6:active + #tapa6{
-moz-animation: animaTapa 4.6s linear 0s 1;
-webkit-animation: animaTapa 4.6s linear 0s 1;
-o-animation: animaTapa 4.6s linear 0s 1;
-ms-animation: animaTapa 4.6s linear 0s 1;
animation: animaTapa 4.6s linear 0s 1;
}
#interruptor6:active ~ #allen6{
-moz-animation: animaAllen 4.6s linear 0s 1;
-webkit-animation: animaAllen 4.6s linear 0s 1;
-o-animation: animaAllen 4.6s linear 0s 1;
-ms-animation: animaAllen 4.6s linear 0s 1;
animation: animaAllen 4.6s linear 0s 1;
}
@-moz-keyframes animaAllen{
0%{
-moz-transform: rotate(0deg);
}
17%{
-moz-transform: rotate(0deg);
}
50%{
-moz-transform: rotate(-90deg);
}
83%{
-moz-transform: rotate(0deg);
}
100%{
-moz-transform: rotate(0deg);
}
}
@-webkit-keyframes animaAllen{
0%{
-webkit-transform: rotate(0deg);
}
17%{
-webkit-transform: rotate(0deg);
}
50%{
-webkit-transform: rotate(-90deg);
}
83%{
-webkit-transform: rotate(0deg);
}
100%{
-webkit-transform: rotate(0deg);
}
}
@-o-keyframes animaAllen{
0%{
-o-transform: rotate(0deg);
}
17%{
-o-transform: rotate(0deg);
}
50%{
-o-transform: rotate(-90deg);
}
83%{
-o-transform: rotate(0deg);
}
100%{
-o-transform: rotate(0deg);
}
}
@-ms-keyframes animaAllen{
0%{
-ms-transform: rotate(0deg);
}
17%{
-ms-transform: rotate(0deg);
}
50%{
-ms-transform: rotate(-90deg);
}
83%{
-ms-transform: rotate(0deg);
}
100%{
-ms-transform: rotate(0deg);
}
}
@keyframes animaAllen{
0%{
transform: rotate(0deg);
}
17%{
transform: rotate(0deg);
}
50%{
transform: rotate(-90deg);
}
83%{
transform: rotate(0deg);
}
100%{
transform: rotate(0deg);
}
}
@-moz-keyframes animaInterruptor{
0%{
-moz-transform: rotate(-30deg);
}
8%{
-moz-transform: rotate(0deg);
}
47%{
-moz-transform: rotate(0deg);
}
50%{
-moz-transform: rotate(-30deg);
}
100%{
-moz-transform: rotate(-30deg);
}
}
@-webkit-keyframes animaInterruptor{
0%{
-webkit-transform: rotate(-30deg);
}
8%{
-webkit-transform: rotate(0deg);
}
47%{
-webkit-transform: rotate(0deg);
}
50%{
-webkit-transform: rotate(-30deg);
}
100%{
-webkit-transform: rotate(-30deg);
}
}
@-o-keyframes animaInterruptor{
0%{
-o-transform: rotate(-30deg);
}
8%{
-o-transform: rotate(0deg);
}
47%{
-o-transform: rotate(0deg);
}
50%{
-o-transform: rotate(-30deg);
}
100%{
-o-transform: rotate(-30deg);
}
}
@-ms-keyframes animaInterruptor{
0%{
-ms-transform: rotate(-30deg);
}
8%{
-ms-transform: rotate(0deg);
}
47%{
-ms-transform: rotate(0deg);
}
50%{
-ms-transform: rotate(-30deg);
}
100%{
-ms-transform: rotate(-30deg);
}
}
@keyframes animaInterruptor{
0%{
transform: rotate(-30deg);
}
8%{
transform: rotate(0deg);
}
47%{
transform: rotate(0deg);
}
50%{
transform: rotate(-30deg);
}
100%{
transform: rotate(-30deg);
}
}
@-moz-keyframes animaTapa{
0%{
-moz-transform: rotate(0deg);
}
8%{
-moz-transform: rotate(0deg);
}
35%{
-moz-transform: rotate(45deg);
}
63%{
-moz-transform: rotate(45deg);
}
100%{
-moz-transform: rotate(0deg);
}
}
@-webkit-keyframes animaTapa{
0%{
-webkit-transform: rotate(0deg);
}
8%{
-webkit-transform: rotate(0deg);
}
35%{
-webkit-transform: rotate(45deg);
}
63%{
-webkit-transform: rotate(45deg);
}
100%{
-webkit-transform: rotate(0deg);
}
}
@-o-keyframes animaTapa{
0%{
-o-transform: rotate(0deg);
}
8%{
-o-transform: rotate(0deg);
}
35%{
-o-transform: rotate(45deg);
}
63%{
-o-transform: rotate(45deg);
}
100%{
-o-transform: rotate(0deg);
}
}
@-ms-keyframes animaTapa{
0%{
-ms-transform: rotate(0deg);
}
8%{
-ms-transform: rotate(0deg);
}
35%{
-ms-transform: rotate(45deg);
}
63%{
-ms-transform: rotate(45deg);
}
100%{
-ms-transform: rotate(0deg);
}
}
@keyframes animaTapa{
0%{
transform: rotate(0deg);
}
8%{
transform: rotate(0deg);
}
35%{
transform: rotate(45deg);
}
63%{
transform: rotate(45deg);
}
100%{
transform: rotate(0deg);
}
}