@keyframes

2개 이상의 애니메이션 중간 상태(프레임)을 지정할 때 사용합니다.

/*
@keyframes name{
0%{ 속성 : 값 }
50% { 속성 : 값}
100%{ 속성 : 값}
}
*/

@keyframes moveBox{
0% { left : 100px;}
100% { top: 200px;}
}

 

.box{
width: 100px;
height: 100px;
background : blue;
}

.box:hover{
animation: myAni 3s infinite alternate;
/*
animation-name: myAni;
animation-duration: .3s;
*/
@keyframes myAni{
0% { width : 100px;
background: yellowgreen;} 
100% { width: 300px;
background: red}
}