transition속성을 이용해 인터랙션을 구현
- transition 속성은 요소의 속성값이 변경될때 시간을 지정하여 일정시간동안 부드러운 모션처리가능
- transition-property : CSS속성명 지정 (all을 입려하면 전체 속성 사용가능)
- transition-duration : 전환 효과가 발생할 때 지속할 시간
- transition-delay : 전환 효과가 발생할 때 지연할 시간 (지연 시간 이후에 전환 효과가 나타남)
- transition-timing-function : 전환 효과의 가속도
- linear : 등속 효과
- ease : 가속 효과
- ease-in : 모션 시작시 가속
- ease-out : 모션 종료시 가속
- ease-in-out : 모션 시작, 종료시 모두 가속
- cubic-bezier : 사용자가 지정한 가속 효과 적용
- 모든 전환 효과 관련 속성값을 한꺼번에 축약해서 사용가능!
See the Pen transition by 신범식 (@ulqsqjpw-the-solid) on CodePen.
'FE > 인터렉티브 웹' 카테고리의 다른 글
| 벡터 이미지 파일 제어하기 (0) | 2023.10.06 |
|---|---|
| 자동으로 움직이는 애니메이션 효과 만들기 (0) | 2023.10.05 |
| 콘텐츠 모양을 자유롭게 변형하기 (0) | 2023.10.03 |
| 다양한 그래픽 효과 적용하기 (0) | 2023.10.01 |
| 웹 페이지의 레이아웃 구성하기 (0) | 2023.09.28 |