Jump Animation
Jump animation using css only <html lang="en"> <head> <title>Jump Animation</title> <style> @keyframes jump { 0% {transform: translate3d(0,0,0) scale3d(1,1,1);} 40% {transform: translate3d(0,30%,0) scale3d(.7,1.5,1);} 100% {transform: translate3d(0,100%,0) scale3d(1.5,.7,1);} } .jump { width: 64px; animation: jump 0.5s linear alternate infinite; } </style> </head> <body> <img alt="3schools png logo" class="jump" src="https://app.3schools.in/logo.png" width="60"/> </body> </html> You may like these posts : Write Your Comment
Jump animation using css only <html lang="en"> <head> <title>Jump Animation</title> <style> @keyframes jump { 0% {transform: translate3d(0,0,0) scale3d(1,1,1);} 40% {transform: translate3d(0,30%,0) scale3d(.7,1.5,1);} 100% {transform: translate3d(0,100%,0) scale3d(1.5,.7,1);} } .jump { width: 64px; animation: jump 0.5s linear alternate infinite; } </style> </head> <body> <img alt="3schools png logo" class="jump" src="https://app.3schools.in/logo.png" width="60"/> </body> </html>
You may like these posts :