How to make Ripple effect using CSS3

CSS3 elements (like transition, transform) help us to create many many super cool effects to enhance our web designing. In my previous posts I published some of cool CSS3 tricks like- Shake, Flash, Opacity, Tilt, Jump, Morph effects what already may be you used in your projects, and here I am publishing another great CSS3 trick what will give you wiggle effect on button/images. It’s done by using ‘transform’ property and designed with keyframes to make effect appear step by step. Let’s see how to make wiggle effect using CSS3.

How to make Ripple effect using CSS3

Live Demo:-

Designing the class 

 

Let's name the class

.ks-wiggle

Within bracket 'border' for image added

Whereas our effect will appear on mouse hover so let’s add :hover with class

.ks-wiggle:hover

Within bracket adding animation name, timing-function and duration with cross browser supported prefixes (for mozilla 'moz', for safari and chorme 'webkit' etc)

-webkit-animation-name: wiggle;
    -moz-animation-name: wiggle;
    -ms-animation-name: wiggle;
    -o-animation-name: wiggle;
    animation-name: wiggle;
    -webkit-animation-timing-function: ease-in;
    -moz-animation-timing-function: ease-in;
    -ms-animation-timing-function: ease-in;
    -o-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    -webkit-animation-duration: 1s;
    -moz-animation-duration: 1s;
    -ms-animation-duration: 1s;
    -o-animation-duration: 1s;
    animation-duration: 1s;

And then call keyframes to create ‘transform’ animation and (0% to 100%) for distribute animation’s function. Also added cross browser supported prefixes

@keyframes wiggle {
    0% { transform: skewX(9deg); }
    10% { transform: skewX(-8deg); }
    20% { transform: skewX(7deg); }
    30% { transform: skewX(-6deg); }
    40% { transform: skewX(5deg); }
    50% { transform: skewX(-4deg); }
    60% { transform: skewX(3deg); }
    70% { transform: skewX(-2deg); }
    80% { transform: skewX(1deg); }
    90% { transform: skewX(0deg); }
    100% { transform: skewX(0deg); }
}

Now whole CSS looking like:-

/*crawlist.net wiggle starts*/
.ks-wiggle {
  border:2px #333 solid; 
  cursor: pointer; 
 }

.ks-wiggle:hover  {
    -webkit-animation-name: wiggle;
    -moz-animation-name: wiggle;
    -ms-animation-name: wiggle;
    -o-animation-name: wiggle;
    animation-name: wiggle;
    -webkit-animation-timing-function: ease-in;
    -moz-animation-timing-function: ease-in;
    -ms-animation-timing-function: ease-in;
    -o-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    -webkit-animation-duration: 1s;
    -moz-animation-duration: 1s;
    -ms-animation-duration: 1s;
    -o-animation-duration: 1s;
    animation-duration: 1s;
}
@-webkit-keyframes wiggle {
    0% { -webkit-transform: skewX(9deg); }
    10% { -webkit-transform: skewX(-8deg); }
    20% { -webkit-transform: skewX(7deg); }
    30% { -webkit-transform: skewX(-6deg); }
    40% { -webkit-transform: skewX(5deg); }
    50% { -webkit-transform: skewX(-4deg); }
    60% { -webkit-transform: skewX(3deg); }
    70% { -webkit-transform: skewX(-2deg); }
    80% { -webkit-transform: skewX(1deg); }
    90% { -webkit-transform: skewX(0deg); }
    100% { -webkit-transform: skewX(0deg); }
}

@-moz-keyframes wiggle {
    0% { -moz-transform: skewX(9deg); }
    10% { -moz-transform: skewX(-8deg); }
    20% { -moz-transform: skewX(7deg); }
    30% { -moz-transform: skewX(-6deg); }
    40% { -moz-transform: skewX(5deg); }
    50% { -moz-transform: skewX(-4deg); }
    60% { -moz-transform: skewX(3deg); }
    70% { -moz-transform: skewX(-2deg); }
    80% { -moz-transform: skewX(1deg); }
    90% { -moz-transform: skewX(0deg); }
    100% { -moz-transform: skewX(0deg); }
}

@-ms-keyframes wiggle {
    0% { -ms-transform: skewX(9deg); }
    10% { -ms-transform: skewX(-8deg); }
    20% { -ms-transform: skewX(7deg); }
    30% { -ms-transform: skewX(-6deg); }
    40% { -ms-transform: skewX(5deg); }
    50% { -ms-transform: skewX(-4deg); }
    60% { -ms-transform: skewX(3deg); }
    70% { -ms-transform: skewX(-2deg); }
    80% { -ms-transform: skewX(1deg); }
    90% { -ms-transform: skewX(0deg); }
    100% { -ms-transform: skewX(0deg);  }
}

@-o-keyframes wiggle {
    0% { -o-transform: skewX(9deg); }
    10% { -o-transform: skewX(-8deg); }
    20% { -o-transform: skewX(7deg); }
    30% { -o-transform: skewX(-6deg); }
    40% { -o-transform: skewX(5deg); }
    50% { -o-transform: skewX(-4deg); }
    60% { -o-transform: skewX(3deg); }
    70% { -o-transform: skewX(-2deg); }
    80% { -o-transform: skewX(1deg); }
    90% { -o-transform: skewX(0deg); }
    100% { -o-transform: skewX(0deg); }
}

@keyframes wiggle {
    0% { transform: skewX(9deg); }
    10% { transform: skewX(-8deg); }
    20% { transform: skewX(7deg); }
    30% { transform: skewX(-6deg); }
    40% { transform: skewX(5deg); }
    50% { transform: skewX(-4deg); }
    60% { transform: skewX(3deg); }
    70% { transform: skewX(-2deg); }
    80% { transform: skewX(1deg); }
    90% { transform: skewX(0deg); }
    100% { transform: skewX(0deg); }
}
/*crawlist.net wiggle ends*/

Now it's time to call designed wiggle effect ‘class’ with HTML <img> tag, so with a IMG class call it,

<img class="ks-wiggle" src="Your Image Link"/>

Do it by yourself, on Codepen or CSSdeck or Dreamweaver, and use it on your web project. New CSS3 tutorial will be release soon so stay connected ;)