practice css_animatione1

<!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;
	animation: moveBox 8s infinite;
    -webkit-animation: moveBox 8s infinite; /* for safari */
	animation-direction:alternate;
    -webkit-animation-direction:alternate;  /* for safari */
}
@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);
	}

}
  
  
@-webkit-keyframes moveBox{  /* for safari  */
	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>

Share