@keyframes

@keyframes는 어떤 모습에서 어떤 모습으로 변할 지를 설정

작성법

@keyframes name {
	from(or 0%){. . .} //시작할 때 시점
	n%{. . .} //중간 시점
	to(or 100%){. . .} //마지막 시점 
}

아래처럼 더 세분화하는 것도 가능하다

@keyframes name {
	from(or 0%){. . .} //시작할 때 시점
	from(or 25%){. . .}
	from(or 50%){. . .}
	from(or 75%){. . .}
	to(or 100%){. . .} //마지막 시점 
}

적용한 예시

@keyframes getBigger {
	from(or 0%){
    	width: 0; 
        left: 0;
    } 
	to(or 100%){
   		width: 100px; 
        left: 100px;
    } 
}

div{
    margin: 30px auto;
    background-color: orange;
    animation-name: getBigger;
    animation-duration: 4s;
    animation-timing-function: linear;
    animation-delay: 0s;
    animation-iteration-count: 1;
    animation-direction: normal;
    animation-fill-mode: forwards;
    animation-play-state: running;
}