Aditya Singh Aditya Singh - 3 months ago 10
CSS Question

How to create the following effect in jquery or javscript

I want to create an effect in jquery/javascript so that the play button in the image grows to some size then shrinks back suddenly with a bouncy/pulsating effect.

enter image description here

Answer

This can be done easily with CSS3 animations.


HTML:

 <div class="container">
   <div class="myButton">
     <a class="myButton">
       <img src="http://i.stack.imgur.com/FcuEp.png" alt="" />
      </a>
    </div>
 </div>

CSS for growing and shrinkin object:

.container {
   width: 100%;
   padding: 100px;
   text-align: center;
 }

@-webkit-keyframes zoomout {
from { -webkit-transform: none; }
50% { -webkit-transform: scale(1.5); }
to { -webkit-transform: none; }
}

@keyframes zoomout {
from { transform: none; }
50% { transform: scale(1.5); }
to { transform: none; }
}

.myButton:hover {
-webkit-animation: zoomout 1s;
animation: zoomout 1s;
}

jsFiddle


CSS for bounce effect before shrinking to original size:

.container {
width: 100%;
padding: 100px;
text-align: center;
}

@-webkit-keyframes zoomout {
from { -webkit-transform: none; }
40% { -webkit-transform: scale(1.4); }
60% { -webkit-transform: scale(1.3); }
70% { -webkit-transform: scale(1.2); }
80% { -webkit-transform: scale(1.4); }
90% { -webkit-transform: scale(1.2); }
to { -webkit-transform: none; }
}

@keyframes zoomout {
from { transform: none; }
40% { transform: scale(1.4); }
60% { transform: scale(1.3); }
70% { transform: scale(1.2); }
80% { transform: scale(1.4); }
90% { transform: scale(1.2); }
to { transform: none; }
}

.myButton:hover {
-webkit-animation: zoomout 1s;
animation: zoomout 1.5s;
}

jsFiddle for bounce CSS


You can tweak the scale and animation to your taste. :)

Comments