잔글 (Jmnote 사용자가 CSS Transition 문서를 CSS 트랜지션 문서로 옮겼습니다) |
(→예시) |
||
| 5번째 줄: | 5번째 줄: | ||
*IE 9 이하에서는 안됨 | *IE 9 이하에서는 안됨 | ||
==예시== | ==예시 1: 축약형== | ||
<source lang='html5'> | <source lang='html5'> | ||
<style> | <style> | ||
| 23번째 줄: | 23번째 줄: | ||
:→ 빨간 박스에 마우스 커서를 올리면 너비가 늘어남 | :→ 빨간 박스에 마우스 커서를 올리면 너비가 늘어남 | ||
:→ 예제: http://jmnote.com/css/transition.php | :→ 예제: http://jmnote.com/css/transition.php | ||
==예시 2: 기본형== | |||
<source lang='html5'> | |||
<style> | |||
.box { | |||
width: 100px; | |||
height: 100px; | |||
background: blue; | |||
transition-property: width; | |||
transition-duration: 2s; | |||
} | |||
.box:hover { | |||
width: 300px; | |||
} | |||
</style> | |||
<div class='box'></div> | |||
</source> | |||
:→ 예제: http://jmnote.com/css/transition2.php | |||
==참고 자료== | ==참고 자료== | ||
2014년 11월 8일 (토) 17:25 판
1 개요
- CSS Transition
- CSS 트랜지션
- CSS 변화 애니메이션
- IE 9 이하에서는 안됨
2 예시 1: 축약형
html
Copy
<style>
.box {
width: 100px;
height: 100px;
background: red;
-webkit-transition: width 2s; /* Safari 3.1 - 6.0 */
transition: width 2s;
}
.box:hover {
width: 300px;
}
</style>
<div class='box'></div>
- → 빨간 박스에 마우스 커서를 올리면 너비가 늘어남
- → 예제: http://jmnote.com/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>