Swing Effect with CSS3

In my previous articles, we have seen different types of css3 effects that can be added in our web pages, which will wow your web site visitor. As all of us know the immense potentiality of CSS3, so many experiments can be done with the CSS3 properties. As a continuation of the awesome CSS3 effects tutorial, here we are going to see how to add swing effect with css3 animation. We will try to learn how to add swing effect for any element with the use of css3 animation.

Swing Effect with CSS3

Swing effect with CSS3 properties

Before we go ahead with the swing effect with css3 properties, better to have a basic knowledge about css animations. Please go through the tutorial and proceed to the tutorial.

HTML for Swing Effect with CSS3

We will add the following HTML code into your HTML page.

<div class="swing">
     add image or some text here..
</div>

A div with ‘swing’ class name is added. In case, you want to add some text or image inside the div, add it. Style the div with some specific width and height.

CSS for Swing Effect

.swing {

	width: 300px;
	height: 150px;
	background: red;
}

	   @-webkit-keyframes swing {
            15%
            {
                -webkit-transform: translateX(5px);
                transform: translateX(5px);
            }
            30%
            {
                -webkit-transform: translateX(-5px);
               transform: translateX(-5px);
            } 
            50%
            {
                -webkit-transform: translateX(3px);
                transform: translateX(3px);
            }
            65%
            {
                -webkit-transform: translateX(-3px);
                transform: translateX(-3px);
            }
            80%
            {
                -webkit-transform: translateX(2px);
                transform: translateX(2px);
            }
            100%
            {
                -webkit-transform: translateX(0);
                transform: translateX(0);
            }
        }
         .swing:hover {
            -webkit-animation: swing 1s ease;
            animation: swing 1s ease;
            -webkit-animation-iteration-count: 1;
            animation-iteration-count: 1;
    }

First part of the css for styling the div which we have added. Added height, width and a background for it. Second part is for adding the keyframe. Keyframe indicates differ positions in the animation; 0 to 100% of the animation. And the 3rd part of the swing effect css is adding animation to the element. This animation simply moves the element left and right when we hover on the div element.

Demo for Swing effect with CSS3

This demo will work properly on Chrome browser!

Hover effect with CSS3

You may also read

Awesome CSS3 Effects

label, , , , , , , , ,

About the author