css动画效果

@charset "utf-8";
body{
	margin:100px;
}
div{
	width:200px;
	height: 200px;
	background-color: white;
	border: 2px solid green;


	animation-name: myani;
	animation-duration: 1s;
	animation-timing-function: ease-in;
	/*animation-delay: 1s;*/
	/*animation-iteration-count: infinite;*/

	/*animation-iteration-count: 4;*/
	/*animation-direction: alternate;*/
	/*animation-play-state: paused;*/
	/*animation-fill-mode: forwards;*/
	/*animation-fill-mode: backwards;*/
	/*animation-fill-mode: both;*/




/*最常用简写形式*/
/*时间 缓动效果 次数 缓动交替方向（延时 结束后位置（不再返回（forwards），返回原来（backwards），自判断(both)））*/
  animation:myani 1s ease 2 alternate 1s both;


}
@keyframes myani{
	/*百分比更加灵活*/
/*+*/

    0%，100%{
   		background-color: white;
		margin-left: 0px; 	
    }
    50%{
    	background-color: black;
		margin-left: 100px;   	
    }
    from{
		background-color: white;
		margin-left: 0px;
    }
    to{
		background-color: black;
		margin-left: 100px;   	
    }




}