W3C 표준은 CSS3 전환을 다음과 같이 설명합니다. "CSS 전환을 사용하면 CSS 속성 값이 특정 시간 간격 내에서 원활하게 전환될 수 있습니다. 이 효과는 마우스를 클릭하거나, 포커스를 얻거나, 클릭하거나, 임의의 항목을 트리거할 때 발생할 수 있습니다. 요소로 변경하고 애니메이션 효과로 CSS 속성 값을 원활하게 변경합니다. "
전환 속성의 값에는 다음 4가지가 포함됩니다. >.Transition-property: 전환 그라데이션 처리를 수행할 HTML 요소의 CSS 속성을 지정합니다. 이 속성은 색상, 너비, 높이 등과 같은 다양한 표준 CSS 속성일 수 있습니다.
•Transition-duration: 속성 전환 기간 지정 •Transition-timing-function: 그라데이션 속도 지정:
1.easing: (점진적으로 느려짐) 기본값, 여유 기능 Bessel Er 곡선(0.25, 0.1, 0.25, 1.0)과 동일합니다.
2. 선형: (균일한 속도), 선형 함수는 베지어 곡선(0.0, 0.0, 1.0, 1.0)과 동일합니다. easy-in: (가속), easy-in 기능은 베지어 곡선(0.42, 0, 1.0, 1.0)과 동일합니다.
4. easy-out: (감속), easy-out 기능은 다음과 같습니다. 베지어 곡선(0, 0, 0.58, 1.0)
5. 가속 후 감속), 감속 기능은 베지어 곡선(0.42, 0, 0.58)과 동일합니다. , 1.0);
6 , 큐빅-베지어: (이 값을 사용하면 시간 곡선을 사용자 정의할 수 있습니다), 특정 큐빅-베지어 곡선입니다. 4개의 값(x1, y1, x2, y2)은 곡선의 점 P1과 P2에만 적용됩니다. 모든 값은 [0, 1] 범위 내에 있어야 하며, 그렇지 않으면 유효하지 않습니다.
•전환 지연: 지연 시간, 즉 전환 프로세스를 시작하는 데 걸리는 시간을 지정합니다.
브라우저 호환성
Internet Explorer 9 이하 버전에서는 전환 속성을 지원하지 않습니다.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>transition演示1</title> <style type="text/css"> .animated_p { margin: 100px auto; width:100px; height:60px; background:#92B901; /*简写属性*/ -webkit-transition:-webkit-transform 1s,opacity 1s,background 1s,width 1s,height 1s,font-size 1s; /* Safari */ /*每个属性分开写*/ transition-property:width,height,transform,background,opacity; transition-duration:1s,1s,1s,1s,1s,1s; -webkit-border-radius:5px; border-radius:5px; opacity:0.4; } .animated_p:hover { -moz-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg); opacity:1; background:#1ec7e6; width:200px; height:120px; } </style> </head> <body> <p class="animated_p"></p> </body> </html>위 코드에서 p로 마우스를 이동하면 CSS 속성인 width, height,transform이 나타납니다. , 배경, 불투명도 그라데이션 전환 효과가 발생합니다. 마지막으로 CSS 스타일은 .animated_p에 정의된 스타일이 됩니다. 전환 과정은 대략 다음과 같습니다.
창어가 달로 날아가는 또 다른 온라인 예를 보여주세요. 요구 사항은 다음과 같습니다. 그림 위로 마우스를 이동하면 켜져 있으면 창이 나타나고, 멀리 이동하면 창이 사라집니다.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>transition演示2</title> <style type="text/css"> body{ color: #fff; background:#000; } .change{ display:block; width:400px; height:400px; background:url(http://www.php.cn/) no-repeat center; background-size:cover; border:1em solid rgba(255,255,255,.8); margin:50px auto; } .change img{ display:block; width:300px; height:284px; opacity:0; -webkit-transform:translate(-100px,-100px); transform:translate(-100px,-100px); -webkit-transition:opacity 1s ease-in-out 0.5s,-webkit-transform 1s ease-in-out; transition: opacity 1s ease-in-out 0.5s,transform 1s ease-in-out; } .change:hover img{ -webkit-transform:translate(0px,0px); transform:translate(0px,0px); opacity:1; } </style> </head> <body> <a href="http://image.haosou.com/i?q=%E5%AB%A6%E5%A8%A5png&src=tab_www" class="change " target="_blank"> <img src="http://p4.qhimg.com/t0160e6a92121691e22.png" alt="" /> </a> </body> </html>창을 만들기 위해 떠다니는 효과가 있고, 불투명도 속성과 결합된 변형 속성이 설정되고, 전환 효과가 추가될 수 있습니다.
위 내용은 CSS3의 Transition animation 속성 사용법에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!