Shaking Icons
HTML
<p>Hold mouse down to shake</p>
<div class=""><img src="http://www.ballychohannews.co.uk/wp-content/uploads/2016/06/doll1.png"></div>
<div class=""><img src="http://www.ballychohannews.co.uk/wp-content/uploads/2016/06/doll.png"></div>
CSS
div.shake, div.shake img {
-webkit-transform: translate3d(0,0,0);
-moz-transform: translate3d(0,0,0);
-ie-transform: translate3d(0,0,0);
-o-transform: translate3d(0,0,0);
-khtml-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
div.shake {
display: inline-block;
text-align: center;
color: white;
font: bold 12px Helvetica, Sans-serif;
text-shadow: -1px 2px 1px rgb(50, 50, 50);
margin: 5px;
margin-bottom: 15px;
padding: 0;
width: 65px;
height: 65px;
border-radius: 10px;
box-shadow: 0 8px 18px rgb(100, 100, 100);
cursor: default;
-webkit-user-select: none;
-moz-user-select: none;
-ie-user-select: none;
-o-user-select: none;
-khtml-user-select: none;
user-select: none;
}
div.shake img {
width: 65px;
height: 65px;
border-radius: 8px;
cursor: default;
-webkit-user-select: none;
-moz-user-select: none;
-ie-user-select: none;
-o-user-select: none;
-khtml-user-select: none;
}
html:active div.shake:nth-child(even) {
-webkit-animation: shake-even 250ms infinite linear;
-moz-animation: shake-even 250ms infinite linear;
-ms-animation: shake-even 250ms infinite linear;
animation: shake-even 250ms infinite linear;
}
html:active div.shake:nth-child(odd) {
-webkit-animation: shake-odd 250ms infinite linear;
-moz-animation: shake-odd 250ms infinite linear;
-ms-animation: shake-odd 250ms infinite linear;
animation: shake-odd 250ms infinite linear;
}
@-webkit-keyframes shake-even {
from {
-webkit-transform: rotate(0deg);
margin-bottom: 15px;
}
25% {
-webkit-transform: rotate(2deg);
margin-bottom: 14px;
}
75% {
-webkit-transform: rotate(-2deg);
margin-bottom: 16px;
}
to {
-webkit-transform: rotate(0deg);
margin-bottom: 15px;
}
}
@-webkit-keyframes shake-odd {
from {
-webkit-transform: rotate(0deg);
...