animation-direction

https://webref.ru/css/animation-direction

by Aleksandr Tomashov

HTML

<div>
	<div class="warn normal">normal</div>
	<div class="warn"></div>
	<div class="warn"></div>
	<div class="warn"></div>
</div>

CSS

.warn{
	text-align: center;
	line-height: 90px;
	background-color: #aaa;
	border: 2px solid #cfd3d3;
	border-radius: 5px;	
	margin: 50px;
	height: 100px;
	width: 100px;
}	

.normal{
	-moz-animation: dirnormal 4s;
	animation: dirnormal 4s;
}

@-moz-keyframes dirnormal{
	from {left: 0;}
	  to {left: 300px;}	
}	  

@keyframes dirnormal{
	from {left: 0;}
	  to {left: -600px;}	
}