<!DOCTYPE html> <html> <head> <title>Swinging Image CSS3 Animation</title> <style> @-webkit-keyframes swinging{ 0%{-webkit-transform: rotate(10deg);} 50%{-webkit-transform: rotate(-5deg)} 100%{-webkit-transform: rotate(10deg);} } @keyframes swinging{ 0%{transform: rotate(10deg);} 50%{transform: rotate(-5deg)} 100%{transform: rotate(10deg);} } .swingimage{ position: relative; left: 50px; -webkit-transform-origin: 50% 0; transform-origin: 50% 0; -webkit-animation: swinging 3.5s ease-in-out forwards infinite; animation: swinging 3.5s ease-in-out forwards infinite; } .swingimageshift{ position: relative; left: 50px; margin-top: 30px; -webkit-transform-origin: 25% 0%; transform-origin: 25% 0; -webkit-animation: swinging 3.5s ease-in-out forwards infinite; animation: swinging 3.5s ease-in-out forwards infinite; } </style> </head> <body> <br> <br> <center> <h2>Swinging Image using <br> CSS3 Keyframe Animation</h2> <img class="swingimage" border="0" src="tag.jpg" width="230" height="400"> <img class="swingimageshift" border="0" src="price_tag.png" width="230" height="400"> </center> </body> </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.