"CSS transition 속성"의 두 판 사이의 차이

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>

→ 예제: http://zetawiki.com/ex/css/transition2.php

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

5 같이 보기[ | ]

6 참고[ | ]

http://www.w3schools.com/css/css3_transitions.asp

@@ 1번째 줄: / 1번째 줄: @@
 ==개요==
-;CSS Transition
+;CSS transition
 ;CSS 트랜지션
-*CSS 변화 애니메이션
+*CSS 점진적 변화 애니메이션
 *IE 9 이하에서는 안됨
-==예시==
+==예시 1: 축약형==
-<source lang='html5'>
+<syntaxhighlight lang='html5'>
-<style>
 <style>
 .box {
@@ 13번째 줄: / 12번째 줄: @@
      height: 100px;
      background: red;
-    -webkit-transition: width 2s; /* Safari 3.1 - 6.0 */
      transition: width 2s;
 }
@@ 21번째 줄: / 19번째 줄: @@
 </style>
 <div class='box'></div>
-</source>
+</syntaxhighlight>
-*예제: http://jmnote.com/css/transition.php
+:→ 빨간 박스에 마우스 커서를 올리면 너비가 늘어남
+:→ 예제: http://zetawiki.com/ex/css/transition.php
+==예시 2: 기본형==
+<syntaxhighlight 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>
+</syntaxhighlight>
+:→ 예제: http://zetawiki.com/ex/css/transition2.php
+==예시 3: 여러 속성 동시==
+{{참고|CSS transition-property}}
+<syntaxhighlight lang='html5'>
+<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>
+</syntaxhighlight>
+:→ 너비, 높이, 배경색, 글자색, 글자크기 모두 동시에 transition
+:→ 예제: http://zetawiki.com/ex/css/transition3.php
+==같이 보기==
+*[[CSS transition-property]]
+*[[CSS 트랜지션 이동]]
-==참고 자료==
+==참고==
 *http://www.w3schools.com/css/css3_transitions.asp
 [[분류: CSS]]