Toggle navigation
☰
Home
HTML
CSS
Scripting
Database
Run
<!doctype html> <html> <head> <style type="text/css"> div.bounce { width:50px; height:50px; padding:20px; text-align:center; background:#fc0; position:relative; -webkit-animation:bounce 1s ease-in 2s 6 alternate; /* Safari & Chrome */ -moz-animation:bounce 1s ease-in 2s 6 alternate; /* Firefox */ -ms-animation:bounce 1s ease-in 2s 6 alternate; /* Internet Explorer */ -o-animation:bounce 1s ease-in 2s 6 alternate; /* Opera */ animation:bounce 1s ease-in 2s 6 alternate; /* W3C */ } @-webkit-keyframes 'bounce' { from { top: 20px; left:0px; } to { top: 150px; left:150px; } } @-moz-keyframes 'bounce' { from { top: 20px; left:0px; } to { top: 150px; left:150px; } } @-o-keyframes 'bounce' { from { top: 20px; left:0px; } to { top: 150px; left:150px; } } @-ms-keyframes 'bounce' { from { top: 20px; left:0px; } to { top: 150px; left:150px; } } @keyframes 'bounce' { from { top: 20px; left:0px; } to { top: 150px; left:150px; } } </style> </head> <body> <p>Here is a...</p> <div class="bounce">Bouncing box...</div> </body>
Preview