There are various methods to bounce an element. We can bounce an element using jQuery, any plugin or by simple CSS.
To add the bouncing effect using CSS we use keyframes.
In keyframes the animation is done by changing the style in particular time interval.
In keyframe animation we can change style many times according to out need for different time duration.
Below is the example of bouncing effect:-
HTML-
<body>
<div id="container"> <!-- This is the main container or holder of smiley -->
<h3>Hover over Smiley</h3> <!-- This is to add heading only -->
<div class="circle"> <!-- For structure or circle of smiley -->
<div class="left_circle"> </div> <!-- element for left eye -->
<div class="right_circle"> </div> <!-- element for right eye -->
<div class="mouth"> </div> <!-- element for mouth -->
</div>
</div>
</body>
CSS-
#container { /*styling background container*/
width: 50%;
margin: 0 auto;
padding: 50px;
}
h3{ /*heading styling*/
color: #fff;
text-align: center;
}
.circle { /*Styling Base of the smiley*/
height: 100px;
width: 100px;
margin: 0 auto;
position: relative;
background-color: #ccc;
border-radius: 50px;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
}
.left_circle { /*Styling left eye of smiley*/
top: 20px;
left: 30px;
height: 12px;
width: 12px;
border-radius: 6px;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
position: absolute;
}
.right_circle { /*Styling right eye of smiley*/
top: 20px;
right: 30px;
height: 12px;
width: 12px;
border-radius: 6px;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
position: absolute;
}
.mouth { /*Styling mouth of smiley*/
-webkit-border-bottom-right-radius: 25px;
-webkit-border-bottom-left-radius: 25px;
-moz-border-radius-bottomright: 25px;
-moz-border-radius-bottomleft: 25px;
border-bottom-right-radius: 25px;
border-bottom-left-radius: 25px;
height: 25px;
background-color: #000;
position: absolute;
width: 50px;
left: 25px;
top: 60px;
}
div#container, .circle div {
background-color: #c00;
}
.circle:hover .mouth{ /*Fixing position of mouth on hover */
left: 36px;
top: 70px;
}
.circle:hover { /*Adding animation on the element*/
animation-name: hover-over;
animation-duration: 0.2;
animation-timing-function: linear;
animation-fill-mode: forwards;
-webkit-animation-name: hover-over;
-webkit-animation-duration: 0.2s;
-webkit-animation-timing-function: linear;
-webkit-animation-fill-mode: forwards;
}
@keyframes hover-over { /*When hover over element this style will be added to the element for bounce effect*/
0% {padding: 10px; left: 0px; top: 0px; opacity: 0.7; }
50% {padding: 16px; left: -6px; top: -6px; opacity: 1; }
100% {padding: 13px; left: -3px; top: -3px; opacity: 1; }
}
@-webkit-keyframes hover-over { /*Here webkit is added for browser support, so that bounce effect will be shown in all the browsers*/
0% {padding: 10px; left: 0px; top: 0px; opacity: 0.7; }
50% {padding: 16px; left: -6px; top: -6px; opacity: 1; }
100% {padding: 13px; left: -3px; top: -3px; opacity: 1; }
}
@keyframes hover-out { /*When hover out the element this style will be added to the element*/
0% {padding: 13px; left: -3px; top: -3px; opacity: 1; }
50% {padding: 16px; left: -6px; top: -6px; opacity: 1; }
100% {padding: 10px; left: 0px; top: 0px; opacity: 0.7; }
}
@-webkit-keyframes hover-out { /*Here is the webkit for browser support*/
0% {padding: 13px; left: -3px; top: -3px; opacity: 1; }
50% {padding: 16px; left: -6px; top: -6px; opacity: 1; }
100% {padding: 10px; left: 0px; top: 0px; opacity: 0.7; }
}
Here is the link of above code:-
0 Comment(s)