CSS3 Transitions
CSS3 Transitions
CSS3 전환을 사용하는 방법?
전환 효과를 만들려면 두 가지를 지정해야합니다.
효과를 추가 할 CSS 속성
효과의 지속 시간
참고 : 기간 부분을 지정하지 않으면 기본값은 0이므로 전환 효과가 없습니다.
다음 예는 100 픽셀 * 100 픽셀 빨간색 <div> 요소를 보여줍니다. <div> 요소는 width 속성에 2 초의 전환 효과를 지정했습니다.
예
div {
width: 100px;
height: 100px;
background: red;
-webkit-transition: width 2s; /* Safari */
transition: width 2s;
}
전환 효과는 지정된 CSS 속성 (너비)이 값을 변경하면 시작됩니다.
이제 사용자가 <div> 요소 위에 마우스를 놓을 때 width 속성에 대한 새 값을 지정합니다.
예
div:hover {
width: 300px;
}
[전체소스]
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background: red;
-webkit-transition: width 2s; /* For Safari 3.1 to 6.0 */
transition: width 2s;
}
div:hover {
width: 300px;
}
</style>
</head>
<body>
<p><b>Note:</b> This example does not work in Internet Explorer 9 and earlier versions.</p>
<div></div>
<p>Hover over the div element above, to see the transition effect.</p>
</body>
</html>
커서가 요소 밖으로 마우스를 가져 가면 점차 원래 스타일로 다시 변경됩니다.
여러 속성 값 변경
다음 예제에서는 width 및 height 속성에 전환 효과를 추가합니다. 폭은 2 초, 높이는 4 초입니다.
예
div {
-webkit-transition: width 2s, height 4s; /* Safari */
transition: width 2s, height 4s;
}
[전체소스]
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background: red;
-webkit-transition: width 2s, height 4s; /* For Safari 3.1 to 6.0 */
transition: width 2s, height 4s;
}
div:hover {
width: 300px;
height: 300px;
}
</style>
</head>
<body>
<p><b>Note:</b> This example does not work in Internet Explorer 9 and earlier versions.</p>
<div></div>
<p>Hover over the div element above, to see the transition effect.</p>
</body>
</html>
게시판 목록
퍼블리셔팁
질문은 상단의 QA에서 해주시기 바랍니다.
| 번호 | 분류 | 제목 | 글쓴이 | 날짜 | 조회 |
|---|---|---|---|---|---|
| 1247 | 레이아웃 |
돈도없어개발하기도시러
|
2년 전 | 1602 | |
| 1246 | 레이아웃 |
돈도없어개발하기도시러
|
2년 전 | 1215 | |
| 1245 | 레이아웃 |
돈도없어개발하기도시러
|
2년 전 | 1987 | |
| 1244 | 레이아웃 |
돈도없어개발하기도시러
|
2년 전 | 1503 | |
| 1243 | HTML | 2년 전 | 1667 | ||
| 1242 | HTML |
 godmin |
2년 전 | 988 | |
| 1241 | HTML | 2년 전 | 1184 | ||
| 1240 | HTML | 2년 전 | 1205 | ||
| 1239 | HTML | 2년 전 | 1796 | ||
| 1238 | CSS |
 piadream |
2년 전 | 1303 | |
| 1237 | CSS |
piadream |
2년 전 | 1770 | |
| 1236 | CSS |
제작관리홍보까지
|
2년 전 | 1731 | |
| 1235 | HTML |
제작관리홍보까지
|
2년 전 | 1193 | |
| 1234 | 기타 |
제작관리홍보까지
|
2년 전 | 881 | |
| 1233 | CSS |
제작관리홍보까지
|
2년 전 | 1112 | |
| 1232 | 기타 | 2년 전 | 2129 | ||
| 1231 | CSS | 2년 전 | 1909 | ||
| 1230 | CSS | 2년 전 | 1917 | ||
| 1229 | 반응형 |
까투리장끼
|
3년 전 | 1217 | |
| 1228 | 반응형 | 3년 전 | 4166 | ||
| 1227 | 웹접근성 | 3년 전 | 1719 | ||
| 1226 | 반응형 | 3년 전 | 1994 | ||
| 1225 | CSS | 3년 전 | 1555 | ||
| 1224 | HTML | 3년 전 | 1657 | ||
| 1223 | HTML | 3년 전 | 1382 | ||
| 1222 | CSS |
 EI소프트 |
3년 전 | 1378 | |
| 1221 | CSS | 3년 전 | 1664 | ||
| 1220 | CSS |
네이비블루
|
3년 전 | 2017 | |
| 1219 | CSS | 3년 전 | 1628 | ||
| 1218 | 기타 |
min0000
|
3년 전 | 2486 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기