This CSS Reference section displays the code for an example that illustrates an animation of a bouncing ball.
<!DOCTYPE html> <html> <head> <style> .cAnim { width:50px; height:50px; background-color:tomato; position:relative; border-radius:25px; animation: kfMoveUp cubic-bezier(.6, 0, 1, .8) .87s infinite alternate, kfMoveLeft linear 2s infinite alternate; } @keyframes kfMoveUp { from {top: 0px;} to {top: 350px;} } @keyframes kfMoveLeft { from {left: 0px;} to {left: 250px;} } </style> </head> <body> <div style="border:1px solid black;width:300px;height:400px;background-color:lavender;"> <div class="cAnim"></div> </div> </body> </html>
© 20072024 XoaX.net LLC. All rights reserved.