CSS3 Transition
CSS3 Transition
CSS3에서는 Flash 애니메이션이나 JavaScript를 사용하지 않고도 한 스타일에서 다른 스타일로 전환하여 특정 효과를 추가할 수 있습니다.
어떻게 작동하나요?
CSS3 전환은 요소가 한 스타일에서 다른 스타일로 점진적으로 변경되는 효과입니다.
이를 달성하려면 다음 두 가지를 지정해야 합니다.
효과를 추가할 CSS 속성을 지정하고 효과 지속 시간을 지정합니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>TransitionDemo</title>
<style>
#wrapper {
width: 1024px;
margin: 0 auto;
}
.progress-bar-bg {
width: 960px;
/*background-color: aliceblue;*/
background-color: lightyellow;
}
.progress-bar {
height: 40px;
width: 40px;
background-color: #69C;
border: 1px solid lightyellow;
border-radius: 5px;
}
.progress-bar:hover {
width: 960px;
}
#bar1 {
-webkit-transition: width 5s linear;
/*-webkit-transition: width 5s steps(6, end);*/
/*-webkit-transition: width 5s step-start;*/
}
#bar2 {
-webkit-transition: width 5s ease;
}
#bar3 {
-webkit-transition: width 5s ease-in;
}
#bar4 {
-webkit-transition: width 5s ease-out;
}
#bar5 {
-webkit-transition: width 5s ease-in-out;
}
</style>
</head>
<body>
<div id="wrapper">
<p>linear</p>
<div>
<div id="bar1"></div>
</div>
<p>ease</p>
<div id="bar2"></div>
<p>ease-in</p>
<div id="bar3"></div>
<p>ease-out</p>
<div id="bar4"></div>
<p>ease-in-out</p>
<div id="bar5"></div>
</div>
</body>
</html>다중 변경
여러 스타일의 변형 효과를 추가하려면 쉼표로 구분된 속성을 추가하세요.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
div {
width: 100px;
height: 100px;
background: red;
-webkit-transition: width 2s, height 2s, -webkit-transform 2s; /* For Safari 3.1 to 6.0 */
transition: width 2s, height 2s, transform 2s;
}
div:hover {
width: 200px;
height: 200px;
-webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */
transform: rotate(180deg);
}
</style>
</head>
<body>
<p><b>注意：</b>该实例无法在 Internet Explorer 9 及更早 IE 版本上工作。</p>
<div>鼠标移动到图标上，查看过渡效果。</div>
</body>
</html>전환 속성
다음 표에는 모든 전환 속성이 나열되어 있습니다. 설명 네 가지 전환 하나의 속성에 있는 속성. 3
Transition-ProPERTY는 전환의 CSS 속성 이름을 지정합니다. 3
transition-delay 전환 효과가 시작되는 시점을 지정합니다. 기본값은 0입니다. ~ ~다음 섹션
