css transition vs animation
- transition
- 시작과 끝만 설정함
- 타이밍 함수를 사용해서 중간의 진행 값을 조절 할 수 있음.
- 되돌리면 끝에서 시작으로 돌아감
- 1번만 실행
- 보통 :hover 등과 같이 액션에 따라 동작시킴
- animation
- 시작과 끝 사이를 마음대로 설정 할 수 있음.
- 무한 반복 가능
- 자동 실행 가능
- 앞으로 뒤로 동작 방향 설정 가능
- 요약
- 둘은 거의 비슷하게도 사용할 수 있지만 기본적으로는
- 1. 사용자 반응에 대한 단순 변화는 transition을
- 2. 복잡한 동작이니 JS없는 자동 동작은 animation을
- 사용하면 된다.
