Horje Website
CSS3 Shake Animation – Shake animation – CSS Code

CSS3 Shake Animation – Shake animation

CSS3 Shake Animation - Shake animation - CSS Code


 
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="utf-8">
  5. <title>Example of CSS3 Shake Animation</title>
  6. <style>
  7. .box {
  8. margin: 50px;
  9. width:120px;
  10. height:110px;
  11. background: url("/examples/images/star-fish-transparent.png") no-repeat;
  12. position: relative;
  13. left: 0;
  14. /* Chrome, Safari, Opera */
  15. -webkit-animation-name: shakeit;
  16. -webkit-animation-duration: 2s;
  17. /* Standard syntax */
  18. animation-name: shakeit;
  19. animation-duration: 2s;
  20. }
  22. /* Chrome, Safari, Opera */
  23. @-webkit-keyframes shakeit {
  24. 12.5% {left: -50px;}
  25. 25% {left: 50px;}
  26. 37.5% {left: -25px;}
  27. 50% {left: 25px;}
  28. 62.5% {left: -10px;}
  29. 75% {left: 10px;}
  30. }
  32. /* Standard syntax */
  33. @keyframes shakeit {
  34. 12.5% {left: -50px;}
  35. 25% {left: 50px;}
  36. 37.5% {left: -25px;}
  37. 50% {left: 25px;}
  38. 62.5% {left: -10px;}
  39. 75% {left: 10px;}
  40. }
  41. </style>
  42. </head>
  43. <body>
  44. <p><strong>Note:</strong> Click the "Show Output" button to repeat the animation.</p>
  45. <div class="box"></div>
  46. </body>
  47. </html>



Try Your Self ->



Published:
 September 4, 2020
Author:
 admin
Category:
 CSS Source Code, CSS3 Examples
Views:
 27

This article was posted in CSS Source Code, CSS3 Examples and tagged , , . Bookmark the permalink. Follow comments with the RSS feed for this post.Post a Comment or leave a trackback: Trackback URL.

Leave a Reply

Your email address will not be published. Required fields are marked *

 

Horje © 2011 - 2023