Hosting Solutions
mobile_logo Table of Contents
seal_frontseal_back

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

CSS Videos

Animation Rigging

Folding Content Nav Menu CSS3 Animation JavaScript TutorialBackground Position keyframes Animation CSS TutorialParallax Effect Animation Multiple Background CSS 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