CSS3에서 전환 기능을 사용하는 방법은 무엇입니까?
- 零下一度원래의
- 2017-06-28 09:40:532680검색
1.transition function
전환 속성 사용 방법: 전환:속성 기간 타이밍 기능;
여기서 속성은 원활하게 전환되어야 하는 속성을 나타내고, 지속 시간은 속성 값의 원활한 전환을 완료하는 데 걸리는 시간을 나타냅니다. , timing-function은 속성 값의 원활한 전환을 완료하는 데 걸리는 시간을 나타냅니다.
여러 개의 부드러운 전환 예:
1 <!DOCTYPE html> 2 <html lang="zh-CN"> 3 <head> 4
<meta http-equiv="content-type" content="text/html; charset=utf-8"> 5
<meta http-equiv="x-ua-compatible" content="IE=edge"> 6
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> 7
<title>测试</title> 8 </head> 9 <body>10 <div id="test"></div>11 <style>12 #test{13
width: 500px;14 height: 500px;15 background-color: yellow;16 /*css动画*/17
transform: rotate(0);18 -webkit-transition: transform 0.5s linear, width 0.5s linear;19 -moz-transition: transform 0.5s linear, width 0.5s linear;20 -ms-transition: transform 0.5s linear, width 0.5s linear;21 -o-transition: transform 0.5s linear, width 0.5s linear;22 transition: transform 0.5s linear, width 0.5s linear;23 }24 #test:hover{25 width: 200px;26 transform: rotate(180deg);27 }28 </style>29 </body>30 </html>2.animation 함수
사용 예:
1 <!DOCTYPE html> 2 <html lang="zh-CN"> 3 <head> 4
<meta http-equiv="content-type" content="text/html; charset=utf-8"> 5
<meta http-equiv="x-ua-compatible" content="IE=edge"> 6
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> 7
<title>测试</title> 8 </head> 9 <body>10 <div id="test"></div>11 <style>12 /*animation动画*/13
@-webkit-keyframes colorChange {14 0%{15 background-color: deepskyblue;16 }
50%{18
background-color: red;19 }20
100%{21 background-color: deepskyblue;22 }23 }24
#test{25 width:500px;26 height: 500px;27
background-color: deepskyblue;28 }29 #test:hover{30 animation-name: colorChange;
animation-duration: 1s;32 animation-timing-function: linear;33 }34 </style>35 </body>36
</html>애니메이션 구현 방법:
| method | 속성값의 변화 속도 |
| linear | 애니메이션의 시작과 끝에서 같은 속도로 변경됩니다 |
| ease-in | 애니메이션이 매우 느리게 시작한 다음 곡선 값을 따라 속도가 빨라집니다 |
| ease- out | 애니메이션이 매우 빠르게 시작되었다가 곡선 값을 따라 느려집니다 |
| ease | 애니메이션이 매우 느리게 시작되었다가 곡선 값을 따라 속도가 빨라진 다음 곡선 값을 따라 느려집니다 |
| ease -in-out | 애니메이션이 매우 느리게 시작된 다음 곡선 값을 따라 속도가 빨라지고 다시 곡선 값을 따라 느려집니다 |
위 내용은 CSS3에서 전환 기능을 사용하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
이전 기사：여백에 음수 값이 할당되는 방법의 예다음 기사：여백에 음수 값이 할당되는 방법의 예