CSS / 애니메이션 / transition / transition-property - transition이 적용될 속성 정하는 속성
transition-property
- transition-property로 transition이 적용될 속성을 정합니다.
- IE는 버전 10부터 지원합니다.
문법
|
1 |
transition-property: none | all | property | initial | inherit |
- none : 모든 속성에 적용하지 않습니다.
- all : 모든 속성에 적용합니다.
- property : 속성을 정합니다. 여러 개의 속성을 지정할 경우 쉼표로 구분합니다.
- initial : 기본값으로 설정합니다.
- inherit : 부모 요소의 속성값을 상속받습니다.
예제
- 체크박스에 체크하면 width, border-radius, background-color의 속성 값이 바뀝니다.
- 첫 번째 박스는 모든 속성에 애니메이션 효과가 적용됩니다.
- 두 번째 박스는 width와 background-color에만 애니메이션 효과가 적용됩니다. border-radius는 체크하자마자 적용됩니다.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 |
<!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> body { font-family: Consolas, monospace; } .jb { box-sizing: border-box; width: 64px; height: 64px; margin: 10px 0px; background-color: orange; transition-duration: 4s; } input:checked ~ .jb { width: 100%; border-radius: 20px; background-color: red; } .jb1 { transition-property: all; } .jb2 { transition-property: width, background-color; } </style> </head> <body> <input type="checkbox"> <p>transition-property: all</p> <div class="jb jb1"></div> <p>transition-property: width, background-color</p> <div class="jb jb2"></div> </body> </html> |
