CARTEL EN MOVIMIENTO

 

Hola hoy os dejo un efecto curioso para el blog.

   Para conseguir este efecto teméis que ir a plantilla- editar HTML y pegar antes </head> el siguiente código :

 

 

  <style>

.swing{

 -webkit-animation:swinging 10s ease-in-out 0s infinite;

 -moz-animation:swinging 10s ease-in-out 0s infinite;

 animation:swinging 10s ease-in-out 0s infinite;

 -webkit-transform-origin:50% 0;

 -moz-transform-origin:50% 0;

 transform-origin:50% 0;

}

@-webkit-keyframes swinging{

 0% { -webkit-transform: rotate(0); }

 5% { -webkit-transform: rotate(10deg); }

 10% { -webkit-transform: rotate(-9deg); }

 15% { -webkit-transform: rotate(8deg); }

 20% { -webkit-transform: rotate(-7deg); }

 25% { -webkit-transform: rotate(6deg); }

 30% { -webkit-transform: rotate(-5deg); }

 35% { -webkit-transform: rotate(4deg); }

 40% { -webkit-transform: rotate(-3deg); }

 45% { -webkit-transform: rotate(2deg); }

 50% { -webkit-transform: rotate(0); } /* Come to rest at 50%. The rest is just stillness */

 100% { -webkit-transform: rotate(0); }

}

@-moz-keyframes swinging{

 0% { -moz-transform: rotate(0); }

 5% { -moz-transform: rotate(10deg); }

 10% { -moz-transform: rotate(-9deg); }

 15% { -moz-transform: rotate(8deg); }

 20% { -moz-transform: rotate(-7deg); }

 25% { -moz-transform: rotate(6deg); }

 30% { -moz-transform: rotate(-5deg); }

 35% { -moz-transform: rotate(4deg); }

 40% { -moz-transform: rotate(-3deg); }

 45% { -moz-transform: rotate(2deg); }

 50% { -moz-transform: rotate(0); } /* Come to rest at 50%. The rest is just stillness */

 100% { -moz-transform: rotate(0); }

}

@keyframes swinging{

 0% { transform: rotate(0); }

 5% { transform: rotate(10deg); }

 10% { transform: rotate(-9deg); }

 15% { transform: rotate(8deg); }

 20% { transform: rotate(-7deg); }

 25% { transform: rotate(6deg); }

 30% { transform: rotate(-5deg); }

 35% { transform: rotate(4deg); }

 40% { transform: rotate(-3deg); }

 45% { transform: rotate(2deg); }

 50% { transform: rotate(0); } /* Come to rest at 50%. The rest is just stillness */

 100% { transform: rotate(0); }

}

</style>    

 

Y luego después de guardar los cambios  añadir un gadget-javasript-html  y ponéis el siguiente código. podéis cambiar (o.5s;) por (0.8s;) esto seria el tiempo de movimiento en segundos.

 

  

<img class="swing" src=" Aquí la URL de la imagen " style="

 animation-delay: 0.5s;

 -webkit-animation-delay: 0.5s;

 -moz-animation-delay: 0.5s;

 animation-delay: 0.5s;

 "

/>