CSS의 전환은 요소의 전후 상태를 부드럽게 변화시키는 효과를 제공하며, 단지 시작과 종료 상태만 고려하면 되기 때문에 간단하게 사용할 수 있다.
반면, 애니메이션은 시작과 종료뿐만 아니라 중간 상태도 고려할 수 있으며, 더 복잡하고 다양한 효과를 추가할 수 있다.
CSS 값이 달라질 때 요소에 어떤 효과로 반영될지 지정한다.
속성, 지속 시간, 시간 함수, 지연 시간 순으로 값을 넣을 수 있다.
**** 적용할 CSS 속성이 이미 기존 값이 적용되어 있어야 동작한다.
#square { transition: left 500ms ease-in 100ms; }
CSS 애니메이션은 여러 CSS 스타일 속성으로 요소의 크기, 색상, 모양 등을 제어해 애니메이션 효과를 부여하는 기술이다.
자바스크립트를 사용하지 않고도 간단하게 요소에 동적 효과를 부여할 수 있기 때문에 보다 좋은 성능으로 애니메이션을 구현할 수 있다.
@keyframes애니메이션 프레임을 정의하는 CSS 규칙이다.
from, to 키워드로 애니메이션의 시작과 종료의 스타일을 정의하거나,
0% - 100% 사이의 퍼센트 값으로 각 단계의 애니메이션을 정의할 수 있다.