- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="utf-8">
- <title>Example of CSS3 Shake Animation</title>
- <style>
- .box {
- margin: 50px;
- width:120px;
- height:110px;
- background: url("/examples/images/star-fish-transparent.png") no-repeat;
- position: relative;
- left: 0;
- /* Chrome, Safari, Opera */
- -webkit-animation-name: shakeit;
- -webkit-animation-duration: 2s;
- /* Standard syntax */
- animation-name: shakeit;
- animation-duration: 2s;
- }
- /* Chrome, Safari, Opera */
- @-webkit-keyframes shakeit {
- 12.5% {left: -50px;}
- 25% {left: 50px;}
- 37.5% {left: -25px;}
- 50% {left: 25px;}
- 62.5% {left: -10px;}
- 75% {left: 10px;}
- }
- /* Standard syntax */
- @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>