- CSS transition-property Property
- CSS transition-property 속성
1 값 목록[ | ]
- transition-property를 지정하면 지정한 것들만 transition(점진적 변화)됨
- 예: background, width, height, outline, color, font-size 등
- all로 하면 모든 속성에 transition 효과가 적용됨
- none으로 하면 모든 속성에 transition 효과가 비활성화됨
값 | 설명 |
---|---|
none | 모든 속성에 transition 비활성화 |
all | 모든 속성에 transition 적용 ★ |
property | 지정한 속성들에 transition 적용 ★ |
2 transition 가능 property 목록[ | ]
분류 | property |
---|---|
위치 | top, bottom, left, right |
크기 | width, height |
공간 | margin, padding, background, background-color, opacity |
테두리 | border, border-width, border-radius, border-color |
글자 | font-size, color |
3 예시: all[ | ]
html
Copy
<style>
.box {
text-align: center;
width: 100px;
height: 100px;
background: blue;
color: white;
font-size: 12px;
transition: all 3s;
}
.box:hover {
background: red;
width: 300px;
height: 300px;
color: black;
font-size: 36px;
}
</style>
<div class='box'>안녕 친구들</div>
- → 너비, 높이, 배경색, 글자색, 글자크기 모두 동시에 transition
- → 예제: http://zetawiki.com/ex/css/transition3.php
4 같이 보기[ | ]
5 참고[ | ]
편집자 Jmnote Jmnote bot
로그인하시면 댓글을 쓸 수 있습니다.