잔글 (Jmnote님이 CSS 트랜지션 문서를 CSS transition 속성 문서로 이동했습니다) |
Jmnote bot (토론 | 기여) 잔글 (봇: 자동으로 텍스트 교체 (-<source +<syntaxhighlight , -</source> +</syntaxhighlight>)) |
||
| (사용자 2명의 중간 판 2개는 보이지 않습니다) | |||
| 6번째 줄: | 6번째 줄: | ||
==예시 1: 축약형== | ==예시 1: 축약형== | ||
< | <syntaxhighlight lang='html5'> | ||
<style> | <style> | ||
.box { | .box { | ||
| 19번째 줄: | 19번째 줄: | ||
</style> | </style> | ||
<div class='box'></div> | <div class='box'></div> | ||
</ | </syntaxhighlight> | ||
:→ 빨간 박스에 마우스 커서를 올리면 너비가 늘어남 | :→ 빨간 박스에 마우스 커서를 올리면 너비가 늘어남 | ||
:→ 예제: http://zetawiki.com/ex/css/transition.php | :→ 예제: http://zetawiki.com/ex/css/transition.php | ||
==예시 2: 기본형== | ==예시 2: 기본형== | ||
< | <syntaxhighlight lang='html5'> | ||
<style> | <style> | ||
.box { | .box { | ||
| 38번째 줄: | 38번째 줄: | ||
</style> | </style> | ||
<div class='box'></div> | <div class='box'></div> | ||
</ | </syntaxhighlight> | ||
:→ 예제: http://zetawiki.com/ex/css/transition2.php | :→ 예제: http://zetawiki.com/ex/css/transition2.php | ||
==예시 3: 여러 속성 동시== | ==예시 3: 여러 속성 동시== | ||
{{참고|CSS transition-property}} | {{참고|CSS transition-property}} | ||
< | <syntaxhighlight lang='html5'> | ||
<style> | <style> | ||
.box { | .box { | ||
| 63번째 줄: | 63번째 줄: | ||
</style> | </style> | ||
<div class='box'>안녕 친구들</div> | <div class='box'>안녕 친구들</div> | ||
</ | </syntaxhighlight> | ||
:→ 너비, 높이, 배경색, 글자색, 글자크기 모두 동시에 transition | :→ 너비, 높이, 배경색, 글자색, 글자크기 모두 동시에 transition | ||
:→ 예제: http://zetawiki.com/ex/css/transition3.php | :→ 예제: http://zetawiki.com/ex/css/transition3.php | ||
| 69번째 줄: | 69번째 줄: | ||
==같이 보기== | ==같이 보기== | ||
*[[CSS transition-property]] | *[[CSS transition-property]] | ||
*[[CSS 트랜지션 이동]] | |||
==참고 | ==참고== | ||
*http://www.w3schools.com/css/css3_transitions.asp | *http://www.w3schools.com/css/css3_transitions.asp | ||
[[분류: CSS]] | [[분류: CSS]] | ||
2021년 9월 24일 (금) 23:26 기준 최신판
1 개요[ | ]
- CSS transition
- CSS 트랜지션
- CSS 점진적 변화 애니메이션
- IE 9 이하에서는 안됨
2 예시 1: 축약형[ | ]
html
Copy
<style>
.box {
width: 100px;
height: 100px;
background: red;
transition: width 2s;
}
.box:hover {
width: 300px;
}
</style>
<div class='box'></div>
- → 빨간 박스에 마우스 커서를 올리면 너비가 늘어남
- → 예제: http://zetawiki.com/ex/css/transition.php
3 예시 2: 기본형[ | ]
html
Copy
<style>
.box {
width: 100px;
height: 100px;
background: blue;
transition-property: width;
transition-duration: 2s;
}
.box:hover {
width: 300px;
}
</style>
<div class='box'></div>
4 예시 3: 여러 속성 동시[ | ]
CSS transition-property 문서를 참고하십시오.
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