keyframes rule

@keyframes

2개 이상의 애니메이션 중간 상태(프레임)을 지정

@keyframes 애니메이션이름 {
    0%{속성: 값;}
    50%{속성: 값;}
    100%{속성: 값;}
  }

@keyframes move-box {
	0%{left: 100px;}
    100%{top: 200px;}
  }

 

 

.box {
  width: 100px;
  height: 100px;
  background: tomato;
  border-radius: 10px;
}

.box:hover{
  animation: my-animation 3s infinite alternate;
}

@keyframes my-animation{
  0%{
    width: 100px;
    background: tomato;
  }
  75%{
    width: 500px;
    background: dodgerblue;
  }
  100%{
    width: 300px;
    background: yellowgreen;
  }
}

이런식으로 다양하게 애니메이션을 제어할 수 있다.