Advertisement
naocrrds

on hover bouncing image infinite

May 16th, 2022
1,614
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 0.77 KB | None | 0 0
  1. #image01{
  2. -webkit-animation-duration: 1s;
  3. animation-duration: 1s;
  4. -webkit-animation-fill-mode: both;
  5. animation-fill-mode: both;
  6. -webkit-animation-timing-function: ease-in-out;
  7. animation-timing-function: ease-in-out;
  8. animation-iteration-count: infinite;
  9. -webkit-animation-iteration-count: infinite;
  10. display: inline-block;
  11. z-index:9;}
  12.  
  13. #image02:hover{
  14. animation-name: bounce;
  15. -moz-animation-name: bounce;}
  16.  
  17. @keyframes bounce{
  18. 0%, 100%, 20%, 50%, 80% {
  19. -webkit-transform: translateY(0);
  20. -ms-transform: translateY(0);
  21. transform: translateY(0)}
  22.  
  23. 40% {
  24. -webkit-transform: translateY(-30px);
  25. -ms-transform: translateY(-30px);
  26. transform: translateY(-30px)}
  27.  
  28. 60% {
  29. -webkit-transform: translateY(-15px);
  30. -ms-transform: translateY(-15px);
  31. transform: translateY(-15px)}
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement