Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • How to create a swing image using css3 animation?

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 918
    Comment on it

     In this blog, we will create an image that will swing like a pendulum continuously using css3 keyframes animation. This type of image can be used in signups and discounts, that will draw more attention of users. In this example, I have used keyframes animation and transform property of css3.

    Here are the HTML and CSS code to achieve swing image .

    1. <!doctype html>
    2. <head>
    3.  
    4.  
    5. <style>
    6.  
    7. @-webkit-keyframes swinging{
    8. 0%{-webkit-transform: rotate(10deg);}
    9. 50%{-webkit-transform: rotate(-5deg)}
    10. 100%{-webkit-transform: rotate(10deg);}
    11. }
    12.  
    13.  
    14. @keyframes swinging{
    15. 0%{transform: rotate(10deg);}
    16. 50%{transform: rotate(-5deg)}
    17. 100%{transform: rotate(10deg);}
    18. }
    19.  
    20.  
    21. .discountimage{
    22. position: relative;
    23. left: 50px;
    24. margin-top: 30px;
    25. -webkit-transform-origin: 35% 0;
    26. transform-origin: 35% 0;
    27. -webkit-animation: swinging 3.5s ease-in-out forwards infinite;
    28. animation: swinging 3.5s ease-in-out forwards infinite;
    29. }
    30.  
    31.  
    32. </style>
    33.  
    34. </head>
    35.  
    36. <body>
    37.  
    38. <img class="discountimage" border="0" src="discount-img.png" width="200" height="368">
    39.  
    40. </body>
    41. </html>

     

    Note: This blog will run successfully on all the latest version of different browsers like Firefox, Chrome, Opera, IE etc.

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Reset Password
Fill out the form below and reset your password: