W3C 표준에서는 CSS3 전환을 다음과 같이 설명합니다. "CSS 전환을 사용하면 CSS 속성 값이 특정 시간 간격 내에서 원활하게 전환될 수 있습니다. 이 효과는 마우스를 클릭하고 포커스를 얻었을 때 얻을 수 있습니다. 클릭이나 요소 변경에 의해 트리거되고 애니메이션 효과로 CSS 속성 값을 부드럽게 변경합니다. "
css3 전환(CSS Transition) 애니메이션을 더욱 생생하고 사실적으로 만들어 보세요. .CSS 전환.
어떻게 진행되나요?
CSS3 전환 효과를 사용하면 요소가 한 효과에서 다른 효과로 전환할 수 있습니다. 이렇게 하려면 두 가지를 지정하고 효과의 지속 시간을 지정해야 합니다.
예:
.className{
전환: 너비 2s;
-moz-transition: 너비 2s; /* Firefox 4 */
-webkit-transition: 너비 2s /* Safari 및 Chrome */
-o-transition: width 2s; /* Opera */
}
참고: 애니메이션 지연 시간을 지정하지 않으면 기본값이 0이므로 전환이 적용되지 않습니다.
마우스를 위에 놓으면 변환이 시작됩니다.
.className:hover{width:300px;}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style type="text/css">
body{background:#eee;}
*{margin:0; padding:0; font-family:Arial,"微软雅黑"; cursor:default;}
.wrap{margin:100px;}
.wrap{transition:background 0.5s ease-in-out; width:100px; height:100px; background:#92B901; border-radius:5px;}
.wrap:hover{background:#FFC631;}
</style>
</head>
<body>
<div class="wrap"></div>
</body>
</html> 스타일 변경
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style type="text/css">
.box{width:100px;height:100px;background:red;
transition:1s width,2s height,3s background;}
.box:hover{width:500px;height:300px;background:blue;}
</style>
</head>
<body>
<div class="box">
</div>
</body>
</html>전환 속성
다음 표에는 모든 전환 속성이 나열되어 있습니다.
속성 🎜> 하나의 속성에 4개의 전환 속성을 설정하는 데 사용되는 전환 단축 속성입니다. 3 transition-property 전환을 적용하는 CSS 속성의 이름을 지정합니다. 3 transition-duration 전환 효과에 소요되는 시간을 정의합니다. 기본값은 0입니다. 3 전환 타이밍 함수는 전환 효과의 시간 곡선을 지정합니다. 기본값은 "쉽게"입니다. 3 transition-delay 전환 효과가 시작되는 시기를 지정합니다. 기본값은 0입니다. 3
