Hii,
If you want to give your web page more attractive look,you can use beautiful "on hover animation effects".
By using hover effects you can create visually richer webpage.
We can use different plugins to give "on hover animation effect" but using an external plugin increases your web page loading time, So to create a webpage without using any plugins to give animation effects, you must go through the example below and learn how we can use css keyframe properties and create hover effects.
Note:To see the Animations effect in the example given below hover on any of the boxes.
We can restrict the number of times animation effect will occur by using animation-iteration-count.
In the example given below five boxes with five different animation effect are there.
HTML:
<body>
<h3>On hover box will shake</h3>
<div style="background-color:#37C571;" id="OnHover_animate" class="animationEffect shake">Shake Effect</div>
<h3>On hover box will flash</h3>
<div style="background-color:#FF5722;" id="OnHover_animate" class="animationEffect flash">Flashing Effect</div>
<h3>On hover box will Bounce</h3>
<div style="background-color:#D32F2F;" id="OnHover_animate" class="animationEffect bounce">Bouncing Effect</div>
<h3>Hover in the box to see the Pulse effect</h3>
<div style="background-color:#FF9800;" id="OnHover_animate" class="animationEffect pulse">Pulsing Effect</div>
<h3>Hover in the box to see the FadeIn effect</h3>
<div style="background-color:#8C0FF3" id="OnHover_animate" class="animationEffect fadeIn">Fade In Effect</div>
</body>
CSS:
/* CSS Document */
div{font-size:22px;color: #000;}
h3 {font-size: 30px;text-align: center;color: #000;}
#OnHover_animate {margin:100px auto;width:400px;-webkit-box-shadow: 0 8px 6px -6px black;-moz-box-shadow: 0 8px 6px -6px black;box-shadow: 0 8px 6px -6px black;
text-align: center;padding: 80px;}
.animationEffect { -webkit-animation-name: bounceIn;-webkit-animation-duration: 4s;-webkit-animation-iteration-count: 5;-webkit-animation-timing-function: ease-out;
-webkit-animation-fill-mode: forwards;animation-name: bounceIn;animation-duration: 4s;animation-iteration-count: 5;animation-timing-function: ease-out;animation-fill-mode: forwards;
}
/*
Animation for webkit
*/
@-webkit-keyframes bounce {
0%, 20%, 50%, 80%, 100% {-webkit-transform: translateY(0);}
40% {-webkit-transform: translateY(-30px);}
60% {-webkit-transform: translateY(-15px);}
}
@keyframes bounce {
0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
40% {transform: translateY(-30px);}
60% {transform: translateY(-15px);}
}
/*
Adding the animation to our element
*/
.bounce {
-webkit-animation-name: bounce;
animation-name: bounce;
}
/*
FadeIn animation
*/
@-webkit-keyframes fadeIn {
0% {opacity: 0;}
100% {opacity: 1;}
}
@keyframes fadeIn {
0% {opacity: 0;}
100% {opacity: 1;}
}
.fadeIn {
-webkit-animation-name: fadeIn;
animation-name: fadeIn;
}
/*
FadeOut animation
*/
@-webkit-keyframes fadeOut {
0% {opacity: 1;}
100% {opacity: 0;}
}
@keyframes fadeOut{
0% {opacity: 1;}
100% {opacity: 0;}
}
.fadeOut {
-webkit-animation-name: fadeOut;
animation-name: fadeOut;
}
/*
Pulse animation
*/
@-webkit-keyframes pulse {
0% { -webkit-transform: scale(1); }
50% { -webkit-transform: scale(1.1); }
100% { -webkit-transform: scale(1); }
}
@keyframes pulse {
0% { transform: scale(1); }
50% { transform: scale(1.1); }
100% { transform: scale(1); }
}
.pulse {
-webkit-animation-name: pulse;
animation-name: pulse;
}
/*
Flash animation
*/
@-webkit-keyframes flash {
0%, 50%, 100% {opacity: 1;}
25%, 75% {opacity: 0;}
}
@keyframes flash {
0%, 50%, 100% {opacity: 1;}
25%, 75% {opacity: 0;}
}
.flash {
-webkit-animation-name: flash;
animation-name: flash;
}
/*
Shake animation
*/
@-webkit-keyframes shake {
0%, 100% {-webkit-transform: translateX(0);}
10%, 30%, 50%, 70%, 90% {-webkit-transform: translateX(-30px);}
20%, 40%, 60%, 80% {-webkit-transform: translateX(30px);}
}
@keyframes shake {
0%, 100% {transform: translateX(0);}
10%, 30%, 50%, 70%, 90% {transform: translateX(-30px);}
20%, 40%, 60%, 80% {transform: translateX(30px);}
}
.shake {
-webkit-animation-name: shake;
animation-name: shake;
}
0 Comment(s)