@charset "UTF-8";

/*
Sample usage: (note - remove the shaker class to have a static neat image instead).
<span id="imgBox" style="float:left" title="the caption">
<img class="shake" src="../spotify.jpg" width="544" height="401" >
</span>
*/

#imgBox {
    overflow: hidden; 
	border:1px black solid;
	margin:10px;
	position:relative;
  }
  
#imgBox::after 
	{
	content: attr(title);
	position: absolute;
    width: 100%;
    bottom: 0px;
    left: 0px;
    color: #000000;
    background:#CCC;
	text-align:center;
	font-weight:bold;
	opacity:0.7;
	padding:0px;
	}

#imgBox .shake {
  -webkit-animation-name: shaker;
  -webkit-animation-duration: 60s;
  -webkit-transform-origin: 50% 50%;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: ease-out;
}


@-webkit-keyframes shaker {
  0% { -webkit-transform: translate(0px, 0px) rotate(0deg) scale(1.1)}
  10% {-webkit-transform: translate(0px, -1px) rotate(-1deg) scale(1.12)}
  20% {-webkit-transform: translate(-1px, -1px) rotate(-2deg) scale(1.13);}
  30% { -webkit-transform: translate(-1px, -2px) rotate(-1deg) scale(1.14);}
  40% {-webkit-transform: translate(-2px, -2px) rotate(0deg) scale(1.15);}
  50% {-webkit-transform: translate(-1px, -2px) rotate(1deg) scale(1.16);}
  60% {-webkit-transform: translate(-1px, -1px) rotate(2deg) scale(1.15);}
  70% {-webkit-transform: translate(-1px, 0px) rotate(1deg) scale(1.14);}
  80% {-webkit-transform: translate(0px, 0px) rotate(0deg) scale(1.13);}
  90% { -webkit-transform: translate(0px, 1px) rotate(-1deg) scale(1.12);}
  100% {-webkit-transform: translate(0px, 0px) rotate(0deg) scale(1.1);}
}