Adam Khoury

Donate funds to show love and support

Click the button below to donate funds securely online. You can use your PayPal account or a credit card.

Your donations help free up my time to produce more content and assist in covering server costs. It's also a great way to say thanks for the content!

Application Configuration

Adam will be adding options here soon.

keyframes Animation Tutorial Floating Elements

Published :
Author :
Adam Khoury
Learn some CSS keyframe animation logic to render an animated elliptic shadow under an animated floating element on your HTML web page. <!DOCTYPE html> <html> <head> <style> div.bot_container{ width:285px; height:420px; margin:0px auto; } div.bot{ position: relative; background: url(adam.png); width: 285px; height: 302px; top: 0px; animation: bot_float ease 2s infinite; } @keyframes bot_float { 50% { top: 100px; } 100% { top: 0px; } } div.bot_shadow{ position: relative; height:16px; background: #999; opacity:0.1; border-radius:100%; margin:0px 0px 0px 0px; top:100px; animation: shadow_react ease 2s infinite; } @keyframes shadow_react { 50% { margin:0px 20% 0px 20%; opacity:0.7; } 100% { margin:0px 0px 0px 0px; opacity:0.1; } } </style> </head> <body> <div class="bot_container"> <div class="bot"></div> <div class="bot_shadow"></div> </div> </body> </html>