CSS3 Shake Animation Examples
CSS3 Shake Animation Examples
<!DOCTYPE html>
<html>
<head>
<title>CSS3 Shake Animation Examples</title>
<style type="text/css">
.box {
margin: 50px;
width:120px;
height:110px;
background: url("css3.jpg") no-repeat;
position: relative;
left: 0;
-webkit-animation-name: shakeit;
-webkit-animation-duration: 2s;
animation-name: shakeit;
animation-duration: 2s;
}
@-webkit-keyframes shakeit {
12.5% {left: -50px;}
25% {left: 50px;}
37.5% {left: -25px;}
50% {left: 25px;}
62.5% {left: -10px;}
75% {left: 10px;}
}
@keyframes shakeit {
12.5% {left: -50px;}
25% {left: 50px;}
37.5% {left: -25px;}
50% {left: 25px;}
62.5% {left: -10px;}
75% {left: 10px;}
}
</style>
</head>
<body>
<p><strong>Note:</strong> Click the "Show Output"
button to repeat the animation.</p>
<div class="box"></div>
</body>
</html>
Output