<!DOCTYPE html> <html> <head> <style> .falling-banner{ position:absolute; top:100px; width:250px; height:150px; background-color:lightblue; animation:fallingBanner 1s 1; } .perspective-container{ width:100%; height:100%; background-color:rgb(210,210,210); border-radius:10px; perspective: 400px; } @keyframes fallingBanner{ 0%{ top:-300px; animation-timing-function:ease-in; } 100%{ top:100px; } } </style> </head> <body> <div class="falling-banner"> <div class="perspective-container"> <div class="vibrating-box"> </div> </div> </div> </body> </html> <!DOCTYPE html> <html> <head> <style> .falling-banner{ position:absolute; top:100px; width:250px; height:150px; background-color:lightblue; animation:fallingBanner 1s 1; } .perspective-container{ width:100%; height:100%; background-color:rgb(210,210,210); border-radius:10px; perspective: 400px; -webkit-perspective: 400px; } @keyframes fallingBanner{ 0%{ top:-300px; animation-timing-function:ease-in; } 100%{ top:100px; } } </style> </head> <body> <div class="falling-banner"> <div class="perspective-container"> </div> </div> </body> </html>
Run
×
Share