Horje Website
CSS3 Infinite Translate Animation – Translate animation infinite – CSS Code

CSS3 Infinite Translate Animation – Translate animation infinite

CSS3 Infinite Translate Animation - Translate animation infinite - CSS Code


 
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="utf-8">
  5. <title>Example of CSS3 Infinite Translate Animation</title>
  6. <style>
  7. .box {
  8.         margin: 50px;
  9. width:103px;
  10. height:130px;
  11. background: url("/examples/images/octopus.png") no-repeat;
  12. position: relative;
  13. /* Chrome, Safari, Opera */
  14. -webkit-animation: repeatit 2s linear 0s infinite alternate;
  15. /* Standard syntax */
  16. animation: repeatit 2s linear 0s infinite alternate;
  17. }
  19. /* Chrome, Safari, Opera */
  20. @-webkit-keyframes repeatit {
  21. from {left: 0;}
  22. to {left: 50%;}
  23. }
  25. /* Standard syntax */
  26. @keyframes repeatit {
  27. from {left: 0;}
  28. to {left: 50%;}
  29. }
  30. </style>
  31. </head>
  32. <body>
  33. <div class="box"></div>
  34. </body>
  35. </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