CSS3의 Transition animation 속성 사용법에 대한 자세한 설명
- 高洛峰원래의
- 2017-03-08 13:27:271736검색
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 중국어 웹사이트의 기타 관련 기사를 참조하세요!