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
    • 572
    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 .

    <!doctype html>
    <head>
    
    
        <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);}
        }
    
    
        .discountimage{
        position: relative;
        left: 50px;
        margin-top: 30px;
        -webkit-transform-origin: 35% 0;
        transform-origin: 35% 0;
        -webkit-animation: swinging 3.5s ease-in-out forwards infinite;
        animation: swinging 3.5s ease-in-out forwards infinite;
    }
    
    
    </style>
    
    </head>
    
    <body>
    
    <img class="discountimage" border="0" src="discount-img.png" width="200" height="368">
    
    </body>
    </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
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: