CSS Animation #2

Animation #1에서 배운 박스를 자연스럽게 왔다갔다하기

animation: ani 3s infinite alternate;

반대 방향에서 시작하기

animation: ani 3s infinite reverse;

 animation: ani 3s linear;

기본 속성으로 돌아온 뒤 다시 적용하면 박스가 한번 움직이고 첫 스타트 지점으로 되돌아오고 끝나게된다
만약 스타트 지점이 아닌 마지막 지점에 멈추게 할 땐 forwards 속성을 사용한다

 animation: ani 3s linear forwards;

박스에 마우스를 가져다 댔을 때 일시정지를 할 수 있게 속성을 지정할 수 있다

.box:hover {
    animation-play-state: paused;
}