Attēla notrīcēšana uzejot uz tā

by Antikrists

HTML

<a href="http://ucozwebmeistars.ucoz.lv/"><img src="http://www.bildites.lv/images/g2cth3sm/80535/original.jpg" class="brand buzz-out" border="0" height="210" width="410"></a>

CSS

buzz-out {  
  display:inline-block;  
  -webkit-transform:translateZ(0);  
  transform:translateZ(0);  
  box-shadow:0 0 1px rgba(0,0,0,0)  
}  
.buzz-out:hover,.buzz-out:focus,.buzz-out:active {  
  -webkit-animation-name:buzz-out;  
  animation-name:buzz-out;  
  -webkit-animation-duration:0.75s;  
  animation-duration:0.75s;  
  -webkit-animation-timing-function:linear;  
  animation-timing-function:linear;  
  -webkit-animation-iteration-count:1;  
  animation-iteration-count:1  
}  
@keyframes buzz-out {  
  10% {  
  -webkit-transform:translateX(3px) rotate(2deg);  
  transform:translateX(3px) rotate(2deg)  
  }  
  20% {  
  -webkit-transform:translateX(-3px) rotate(-2deg);  
  transform:translateX(-3px) rotate(-2deg)  
  }  
  30% {  
  -webkit-transform:translateX(3px) rotate(2deg);  
  transform:translateX(3px) rotate(2deg)  
  }  
  40% {  
  -webkit-transform:translateX(-3px) rotate(-2deg);  
  transform:translateX(-3px) rotate(-2deg)  
  }  
  50% {  
  -webkit-transform:translateX(2px) rotate(1deg);  
  transform:translateX(2px) rotate(1deg)  
  }  
  60% {  
  -webkit-transform:translateX(-2px) rotate(-1deg);  
  transform:translateX(-2px) rotate(-1deg)  
  }  
  70% {  
  -webkit-transform:translateX(2px) rotate(1deg);  
  transform:translateX(2px) rotate(1deg)  
  }  
  80% {  
  -webkit-transform:translateX(-2px) rotate(-1deg);  
  transform:translateX(-2px) rotate(-1deg)  
  }  
  90% {  
  -webkit-transform:translateX(1px) rotate(0);  
  transform:translateX(1px) rotate(0)  
  }  
  100% {  
  -webkit-transform:translateX(-1px) rotate(0);  
  transform:translateX(-1px) rotate(0)  
  }