Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • Learn how to create "on hover" animation effect using css

    • 1
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 770
    Comment on it

    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:

    1. <body>
    2.  
    3. <h3>On hover box will shake</h3>
    4. <div style="background-color:#37C571;" id="OnHover_animate" class="animationEffect shake">Shake Effect</div>
    5. <h3>On hover box will flash</h3>
    6. <div style="background-color:#FF5722;" id="OnHover_animate" class="animationEffect flash">Flashing Effect</div>
    7. <h3>On hover box will Bounce</h3>
    8. <div style="background-color:#D32F2F;" id="OnHover_animate" class="animationEffect bounce">Bouncing Effect</div>
    9. <h3>Hover in the box to see the Pulse effect</h3>
    10. <div style="background-color:#FF9800;" id="OnHover_animate" class="animationEffect pulse">Pulsing Effect</div>
    11. <h3>Hover in the box to see the FadeIn effect</h3>
    12. <div style="background-color:#8C0FF3" id="OnHover_animate" class="animationEffect fadeIn">Fade In Effect</div>
    13.  
    14. </body>

    CSS:

    1. /* CSS Document */
    2.  
    3. div{font-size:22px;color: #000;}
    4. h3 {font-size: 30px;text-align: center;color: #000;}
    5. #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;
    6. text-align: center;padding: 80px;}
    7. .animationEffect { -webkit-animation-name: bounceIn;-webkit-animation-duration: 4s;-webkit-animation-iteration-count: 5;-webkit-animation-timing-function: ease-out;
    8. -webkit-animation-fill-mode: forwards;animation-name: bounceIn;animation-duration: 4s;animation-iteration-count: 5;animation-timing-function: ease-out;animation-fill-mode: forwards;
    9. }
    10.  
    11.  
    12.  
    13. /*
    14. Animation for webkit
    15. */
    16. @-webkit-keyframes bounce {
    17. 0%, 20%, 50%, 80%, 100% {-webkit-transform: translateY(0);}
    18. 40% {-webkit-transform: translateY(-30px);}
    19. 60% {-webkit-transform: translateY(-15px);}
    20. }
    21. @keyframes bounce {
    22. 0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
    23. 40% {transform: translateY(-30px);}
    24. 60% {transform: translateY(-15px);}
    25. }
    26. /*
    27. Adding the animation to our element
    28. */
    29. .bounce {
    30. -webkit-animation-name: bounce;
    31. animation-name: bounce;
    32. }
    33.  
    34.  
    35. /*
    36. FadeIn animation
    37. */
    38. @-webkit-keyframes fadeIn {
    39. 0% {opacity: 0;}
    40. 100% {opacity: 1;}
    41. }
    42. @keyframes fadeIn {
    43. 0% {opacity: 0;}
    44. 100% {opacity: 1;}
    45. }
    46. .fadeIn {
    47. -webkit-animation-name: fadeIn;
    48. animation-name: fadeIn;
    49. }
    50. /*
    51. FadeOut animation
    52. */
    53. @-webkit-keyframes fadeOut {
    54. 0% {opacity: 1;}
    55. 100% {opacity: 0;}
    56. }
    57. @keyframes fadeOut{
    58. 0% {opacity: 1;}
    59. 100% {opacity: 0;}
    60. }
    61. .fadeOut {
    62. -webkit-animation-name: fadeOut;
    63. animation-name: fadeOut;
    64. }
    65.  
    66.  
    67. /*
    68. Pulse animation
    69. */
    70. @-webkit-keyframes pulse {
    71. 0% { -webkit-transform: scale(1); }
    72. 50% { -webkit-transform: scale(1.1); }
    73. 100% { -webkit-transform: scale(1); }
    74. }
    75. @keyframes pulse {
    76. 0% { transform: scale(1); }
    77. 50% { transform: scale(1.1); }
    78. 100% { transform: scale(1); }
    79. }
    80. .pulse {
    81. -webkit-animation-name: pulse;
    82. animation-name: pulse;
    83. }
    84.  
    85. /*
    86. Flash animation
    87. */
    88. @-webkit-keyframes flash {
    89. 0%, 50%, 100% {opacity: 1;}
    90. 25%, 75% {opacity: 0;}
    91. }
    92. @keyframes flash {
    93. 0%, 50%, 100% {opacity: 1;}
    94. 25%, 75% {opacity: 0;}
    95. }
    96. .flash {
    97. -webkit-animation-name: flash;
    98. animation-name: flash;
    99. }
    100.  
    101.  
    102. /*
    103. Shake animation
    104. */
    105. @-webkit-keyframes shake {
    106. 0%, 100% {-webkit-transform: translateX(0);}
    107. 10%, 30%, 50%, 70%, 90% {-webkit-transform: translateX(-30px);}
    108. 20%, 40%, 60%, 80% {-webkit-transform: translateX(30px);}
    109. }
    110. @keyframes shake {
    111. 0%, 100% {transform: translateX(0);}
    112. 10%, 30%, 50%, 70%, 90% {transform: translateX(-30px);}
    113. 20%, 40%, 60%, 80% {transform: translateX(30px);}
    114. }
    115. .shake {
    116. -webkit-animation-name: shake;
    117. animation-name: shake;
    118. }
    119.  

     

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Reset Password
Fill out the form below and reset your password: