Swinging Image using CSS3 Animation

Submitted by Jeprox on Friday, January 8, 2016 - 17:34.

Language

In this tutorial we are going to learn how to make an image swing continously using CSS3 keyframe animation. This effect has become popular for images like signs and discounts in websites for this they get the attention of the users or visitors. You can play around with the codes try to change the values and see the changes. Here's the complete source code: 
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>Swinging Image CSS3 Animation</title>
  5. <style>
  6. @-webkit-keyframes swinging{
  7. 	0%{-webkit-transform: rotate(10deg);}
  8. 	50%{-webkit-transform: rotate(-5deg)}
  9. 	100%{-webkit-transform: rotate(10deg);}
  10. }
  11.  
  12. @keyframes swinging{
  13. 	0%{transform: rotate(10deg);}
  14. 	50%{transform: rotate(-5deg)}
  15. 	100%{transform: rotate(10deg);}
  16. }
  17.  
  18. .swingimage{
  19. 	position: relative;
  20. 	left: 50px;
  21. 	-webkit-transform-origin: 50% 0;
  22. 	transform-origin: 50% 0;
  23. 	-webkit-animation: swinging 3.5s ease-in-out forwards infinite;
  24. 	animation: swinging 3.5s ease-in-out forwards infinite;
  25. }
  26.  
  27. .swingimageshift{
  28. 	position: relative;
  29. 	left: 50px;
  30. 	margin-top: 30px;
  31. 	-webkit-transform-origin: 25% 0%;
  32. 	transform-origin: 25% 0;
  33. 	-webkit-animation: swinging 3.5s ease-in-out forwards infinite;
  34. 	animation: swinging 3.5s ease-in-out forwards infinite;
  35. }
  36.  
  37.  
  38. </style>
  39. </head>
  40. <body>
  41. <br>
  42. <br>
  43. <center>
  44. <h2>Swinging Image using <br> CSS3 Keyframe Animation</h2>
  45. <img class="swingimage" border="0" src="tag.jpg" width="230" height="400">
  46. <img class="swingimageshift" border="0" src="price_tag.png" width="230" height="400">
  47. </center>
  48. </body>
  49.  
  50. </html>

Note: Due to the size or complexity of this submission, the author has submitted it as a .zip file to shorten your download time. After downloading it, you will need a program like Winzip to decompress it.

Virus note: All files are scanned once-a-day by SourceCodester.com for viruses, but new viruses come out every day, so no prevention program can catch 100% of them.

FOR YOUR OWN SAFETY, PLEASE:

1. Re-scan downloaded files using your personal virus checker before using it.
2. NEVER, EVER run compiled files (.exe's, .ocx's, .dll's etc.)--only run source code.

Tags

Add new comment

About text formats
  • 214 views