Hosting Solutions
mobile_logo Table of Contents

keyframes Animation Tutorial Floating Elements

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; }{ 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>

CSS Videos

Animation Rigging

Holiday Christmas Lights Animation Tutorial CSS JavaScriptParallax Effect Animation Multiple Background CSS TutorialBackground Position keyframes Animation CSS TutorialFolding Content Nav Menu CSS3 Animation JavaScript TutorialPure CSS Animated Menu Button Transitionskeyframes Animation Tutorial Floating ElementsAnimated Repeating Tile Background keyframes TutorialFlip 3D Boxes and Cards Animation CSS TutorialFlash and Pulse Effects keyframes Animation TutorialImage Zoom Effect Animation CSS3 HTML Tutorial