animation-timing-function

ease	빠르게 - 느리게	cubic-bezier( .25, .1, .25, ,1)
linear	일정하게	cubic-bezier(0, 0, 1, 1)
ease-in	느리게 - 빠르게	cubic-bezier(.42, 0, 1, 1)
ease-out	빠르게 - 느리게	cubic-bezier(0, 0, .58, 1)
ease-in-out	느리게 - 빠르게 - 느리게	cubic-bezier(0, 0, .58, 1)
cubic-beier(n, n, n, n)	자신만의 값을 정의
steps(n)	n번 분할된 애니메이션

 

animation-delay : 대기시간 (음수 값도 허용)

 

.box:hover{
animation: size-up 1s 2 alternate linear 0s;
/* animation-timing-function: linear;
animation-delay; */
}

@keyframes size-up{
0%{ width: 100px;}
100% {width: 500px;}
}