- 서서히 변화시키는 속성
- transition-property, transition-duration, transition-timing-function, transtion-delay 속성을 한 번에 정한다.
transition: property timing-function duration delay | initial | inherit
- property: transition을 적용시킬 속성을 정함.
- timing-function: transition 진행속도
- duration: transition의 총 시간을 정함.
- delay: transition의 시작을 연기
- initial: 기본값 설정
- inherit: 부모 요소의 속성값을 상속받음
ex> - 체크박스에 체크하면 원이 큰 사각형으로 바뀌고, 배경색도 변함
- 체크박스의 체크를 해제하면 원래 모양으로 돌아
<transition-property>
- transition이 적용될 속성을 정함
transition-property: none | all | property | initial | inherit
none: 모든 속성에 적용하지 않음
all: 모든 속성에 적용
property: 속성을 정함.여러 개의 속성을 지정할 경우 쉼표로 구분함.
initial: 기본값으로 설정
inherit: 부모 요소의 속성값을 상속받음.
ex> 체크박스에 체크하면 width, border-radius, background-color의 속성값이 바뀜
- 첫 번째 박스는 모든 속성에 에니메이션 효과가 적용됨
- 두 번째 박스는 width, background-color에만 애니메이션 효과가 적용됨. border-radius는 체크하자마자 적용됨
transition-timing-function: transition의 진행속도를 조절할 수 있음
transition-timing-function: ease(기본값) | linear | ease-in | ease-out | ease-in-out | step-start | step-end | steps(n, start | end) | cubic-bezier(n, n, n, n) | initial | inherit
cubic-bezier(n,n,n,n): n에는 0부터 1까지의 수를 넣음
ease: 느리게 시작했다 빨라졌다 끝날 때 다시 느려짐
linear: 처음부터 끝까지 같은 스피드
ease-in: 느린 시작
ease-out: 느린 엔딩
ease-in-out: 느린 시작과 끝으로 전환 효과 지정
transition-delay: transition 효과의 지연을 나타냄
transition-delay: 1s;
transition-duration: transition 효과가 완성되기까지 얼마의 초, 밀리초가 걸리는지
'코딩 > CSS' 카테고리의 다른 글
| CSS line-height (0) | 2023.04.24 |
|---|---|
| <a>태그 target 속성, rel 속성, class 속성 (0) | 2023.04.24 |
| text-size-adjust (0) | 2023.04.24 |
| CSS touch-action (0) | 2023.04.23 |
| --swiper-theme-color (0) | 2023.04.23 |