CSS3 전환 속성

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

아아앙

지속적인 학습

새로운 파일

<!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:5s width cubic-bezier(0.145,1.295,0.000,1.610);} .box:hover{width:500px;} </style> </head> <body> <div class="box"></div> </body> </html>

제출하다 코드 재설정

자동운전