<!DOCTYPE html> <html> <head> <style> div.animationDemo{ width:250px; height:250px; background-color:lightblue; color:rgb(0,0,0); position:relative; color:white; } div.internalAnimationDemo{ position:absolute; width:50px; height:50px; background-color:red; -webkit-animation: moveBox 8s infinite alternate; -moz-animation: moveBox 8s infinite alternate; -ms-animation: moveBox 8s infinite alternate; -o-animation: moveBox 8s infinite alternate; animation: moveBox 8s infinite alternate; } @-webkit-keyframes moveBox{ 0%{ left:0px; } 25%{ left:200px; top:0px; } 50%{ top:200px; left:200px; } 75%{ left:0px; top:200px; } 100%{ top:0px; left:0px; transform:rotateZ(0deg); } } </style> </head> <body> <div class="animationDemo"> <div class="internalAnimationDemo">Web4</div> </div> <br> </body> </html>
Run
×
Share