(Animation) Create an infinite animation of an element moving in a square pattern
Answer:
Animation of an element moving in a square pattern:
<!doctype html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Graphics.html</title>
<style type = "text/css">
@-webkit-keyframes anim { 0% {left :0px; top: 0px;}
25% {left :100px; top: 0px;}
50% {left :100px; top: 100px;}
75% {left :0px; top: 100px;}
100% {left: 0px; top: 0px;} }
@keyframes anim{ 0% {left :0px; top: 0px;}
25% {left :100px; top: 0px;}
50% {left :100px; top: 100px;}
75% {left :0px; top: 100px;}
100% {left: 0px; top: 0px;} }
@-moz-keyframes anim { 0% {left :0px; top: 0px;}
25% {left :100px; top: 0px;}
50% {left :100px; top: 100px;}
75% {left :0px; top: 100px;}
100% {left: 0px; top: 0px;} }
@-o-keyframes anim { 0% {left :0px; top: 0px;}
25% {left :100px; top: 0px;}
50% {left :100px; top: 100px;}
75% {left :0px; top: 100px;}
100% {left: 0px; top: 0px;} }
#box { position: absolute; border: 2px solid black; -moz-animation: anim 5s linear infinite; -o-animation: anim 5s linear infinite; animation: anim 5s linear infinite; }
</style>
</head>
<body> <div id = "box"> Movingbox</div>
</body>
</html>
Sample Output:
