<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
#logo {
width:150px;
height:150px;
}
#logo:hover {
-webkit-animation-name: grados; /* Chrome, Safari, Opera */
/* Definimos la velocidad en segundos (1s, 0.5s, ...) */
-webkit-animation-duration: 0.5s; /* Chrome, Safari, Opera */
-webkit-animation-iteration-count: infinite; /* Chrome, Safari, Opera */
animation-name: grados;
/* Definimos la velocidad en segundos (1s, 0.5s, ...) */
animation-duration: 0.5s;
animation-iteration-count: infinite;
}
@keyframes grados {
0% {
transform: rotate(-20deg);
-webkit-transform: rotate(-20deg);
-moz-transform: rotate(-20deg);
-o-transform: rotate(-20deg);/* For Opera*/
}
50% {
transform: rotate(+20deg);
-webkit-transform: rotate(+20deg);
-moz-transform: rotate(+20deg);
-o-transform: rotate(+20deg);/* For Opera*/
}
100% {
transform: rotate(-20deg);
-webkit-transform: rotate(-20deg);
-moz-transform: rotate(-20deg);
-o-transform: rotate(-20deg);/* For Opera*/
}
}
</style>
</head>
<body>
<img src="http://www.lawebdelprogramador.com/img/logoCircle.jpg" id="logo">
</body>
</html>
Comentarios sobre la versión: Versión 1.0 (3)
Y feliz año nuevo,con un pokito de atraso ;)