<!DOCTYPE html> <html> <head> <style> .falling-banner{ position:absolute; top:100px; width:250px; height:150px; background-color:lightblue; animation:fallingBanner 1s 1; -webkit-animation:fallingBanner 1s 1; } .perspective-container{ width:100%; height:100%; background-color:rgb(210,210,210); border-radius:10px; perspective: 400px; -webkit-perspective: 400px; } .vibrating-box{ width:100%; height:100%; background-color:rgba(221,187,127,1); color:white; border-radius:10px; transform:rotateX(0deg); transform-origin:top; animation:vibratingBox 2s 1; -webkit-animation:vibratingBox 2s 1; animation-delay:1s; -webkit-animation-delay:1s; box-shadow:3px 3px 2px 0px rgba(210,210,210,1); } @-webkit-keyframes fallingBanner{ /*webkit is for safari */ 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>
Run
×
Share