CSS 애니메이션

내가 보려고 정리하는 코드 

코드는 확실히 복사-붙여넣기 하는 습관을 버려야 한다

귀찮더라도 내 손으로 써버릇해야 외워진다ㅠㅠ..

 

.bg {
	width: 1400px;
    height: 260px;
    position: relative;
    background: url(background.jpg) center/1400px no-repeat;
}
.runner {
    position: absolute;
    margin-top: 170px;
    width: 50px;
    height: 100px;
    animation-name: running;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    background: no-repeat;
    background-size: 50px;
}
@keyframes running {
    0%   {left:0px; top:0px;background-image: url(b01.png);}      
    8.3%   {left:0px; top:0px;background-image: url(b02.png);}      
    16.6%   {left:0px; top:0px;background-image: url(b03.png);}      
    25%   {left:0px; top:0px;background-image: url(b04.png);}
    33.3%   {left:0px; top:0px;background-image: url(b05.png);}  
    41.6%   {left:0px; top:0px;background-image: url(b06.png);}  
    50%   {left:0px; top:0px;background-image: url(b07.png);} 
    58.3%   {left:0px; top:0px;background-image: url(b08.png);}
    66.6%   {left:0px; top:0px;background-image: url(b09.png);}
    75%   {left:0px; top:0px;background-image: url(b10.png);}
    83.3%   {left:0px; top:0px;background-image: url(b11.png);}
    91.6%   {left:0px; top:0px;background-image: url(b12.png);}
    100%   {left:0px; top:0px;background-image: url(b13.png);}
}