[CSS] CSS 트랜지션(Transition) & 애니메이션(Animation)

1. Transition

css 스타일 속성 변경 시 부드럽게 전환시키기 위해 속도를 조절하는 것

transition: property | duration | timing-function | delay 순으로 한 줄로 작성 가능

• property: 효과를 적용하고자 하는 css 프로퍼티 명 지정 , 여러개 지정 시 콤마(,)로 구분
• duration: 효과 지속시간, 밀리초(ms)나 초(s) 단위로 지정
• timing-function: 변화 속도 지정 (ease - 기본 값, linear, ease-in, ease-out, ease-in-out)
• delay: 딜레이 시간만큼 대기 후 효과 발동

See the Pen CSS Transition - timing function by Jieun Kim (@ji-silver) on CodePen.

 

---

2. Animation

css 스타일을 다른 css 스타일로 부드럽게 전환하는 것

animation: name | duration | delay | iteration-count | timing-function | direction 순으로 한 줄로 작성 가능

• name: 키프레임 애니메이션 이름 지정
• iteration-count: 반복 횟수
• direction: 진행 방향 (normal - 기본 값, reverse, alternate, alternate-reverse)

See the Pen CSS Animation - direction by Jieun Kim (@ji-silver) on CodePen.

 

-  normal: from → to, to → from

- reverse: to → from, to → from (역방향)

- alternate: from → to → from

- alternate-reverse: to -> from -> to

 

2-1. @keyframse

애니메이션 스타일을 구체적으로 제어하기

- from, 0%: 시작 / to, 100%: 끝

 

🔎 애니메이션을 중첩해서 사용할 수 있을까?

애니메이션을 적용한 태그를 안쪽에 또 감싸서 parent, child 관계를 만들고 parent와 child에 각각 다른 애니메이션 스타일을 적용한다.