Transition

*Transition 이란 : css 애니메이션의 속도를 조절해주는 선택자.

 

• transition : 모든 속성 한번에 적용
• transition-delay : 몇 초 후에 재생할지 지정
• transition-duration : 몇 초 동안 재생할지 지정
• transition-property : 어떤 속성을 변형할지 지정
• transition-timing-function : 수치 변형 함수 지정

수업시간에는 transition 한가지 활용중. 

ex) transition:width 2s 10s , opacity 2s (전자가 딜레이)

 

 

---

 

1) transition width값 예시

 

See the Pen MWaogQv by Han-daeun (@eun_h) on CodePen.

 

2) opacity값 예시

 

See the Pen rNOwBZd by Han-daeun (@eun_h) on CodePen.