transition과 animation의 차이점
transition은 요소의 속성변화를 자연스럽게 만들어 주는데 사용하고 animation은 요소의 움직임을 나타낼때 사용합니다.
animation 사용하기 위해선 우선 어떤 animation을 사용할지 정해줘야 합니다.
@keyframes 이름{ } 형식으로 animation의 이름을 정해주고
animation의 이름과 지속시간을 animation이 적용될 태그 속성에 적용해주면
위 처럼 animation이 태그에 적용된 것을 볼 수 있습니다.
animation-iteration-count 속성을 사용하면 animation을 여러번 반복 할 수 있습니다.
animation-iteration-count를 3으로 적용하자
속성이 적용된 태그가 timing-function의 간격을 맞춰 3번 반복되는 것을 볼 수 있습니다.
animation을 여러번 반복할때 움직임을 자연스럽게 하기 위해선 animation-direction 속성을 사용합니다.
animation속성을 적용하면 시작과 끝이 위와같이 반복되는 것을 볼 수있습니다 이때 animation-direction의 속성을 alternate를 적용해주면
시작에서 끝으로 끝에서 시작으로 방향이 자연스럽게 움직이는 것을 볼 수 있습니다.
???