CSS3 transition属性详解
Posted firstflying
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了CSS3 transition属性详解相关的知识，希望对你有一定的参考价值。
CSS3 transition详解
transition：[ transition-property ] [ transition-duration ] [ transition-timing-function ] [ transition-delay ]
transition的取值介绍:
[ transition-property ]：检索或设置对象中的参与过渡的属性
[ transition-duration ]：检索或设置对象过渡的持续时间
[ transition-timing-function ]：检索或设置对象中过渡的动画类型,主要有6个值如下：
- ease（逐渐变慢），默认值
- linear（匀速）
- ease-in（加速）
- ease-out（减速），跟ease的区别是，减速的变化程度不一样。
- ease-in-out（先加速，再减速）
- cubic-bezier,允许你自定义一个时间曲线，通过cubic-bezier(x1,y1,x2,y2),此属性值可以模拟以上5个状态，只要传入相应的x1,y1,x2,y2给cubic-bezier(x1,y1,x2,y2)。这4个值必须在[0,1]之间，否则无效。
[ transition-delay ]：检索或设置对象延迟过渡的时间
1 <!DOCTYPE html> 2 <html lang="zh-cn"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>CSS transition属性详解-CSS教程</title> 6 <style> 7 h1 { 8 font-size: 16px; 9 } 10 11 .test { 12 overflow: hidden; 13 width: 100%; 14 margin: 0; 15 padding: 0; 16 list-style: none; 17 } 18 19 .test li { 20 float: left; 21 width: 100px; 22 height: 100px; 23 margin: 0 5px; 24 border: 1px solid #ddd; 25 background-color: #eee; 26 text-align: center; 27 -moz-transition: background-color .5s ease-in; 28 -webkit-transition: background-color .5s ease-in; 29 -o-transition: background-color .5s ease-in; 30 -ms-transition: background-color .5s ease-in; 31 transition: all 2s ease-in 1s; 32 } 33 34 .test li:nth-child(1):hover { 35 background-color: #F0AD4E; 36 transform: rotate(360deg); 37 } 38 39 .test li:nth-child(2):hover { 40 background-color: #999; 41 } 42 43 .test li:nth-child(3):hover { 44 background-color: #630; 45 } 46 47 .test li:nth-child(4):hover { 48 background-color: #090; 49 } 50 51 .test li:nth-child(5):hover { 52 background-color: #f00; 53 } 54 </style> 55 </head> 56 <body> 57 <h1>请将鼠标移动到下面的矩形上：</h1> 58 <ul class="test"> 59 <li>transition背景色过渡</li> 60 <li>transition背景色过渡</li> 61 <li>transition背景色过渡</li> 62 <li>transition背景色过渡</li> 63 <li>transition背景色过渡</li> 64 </ul> 65 </body> 66 </html>
以上是关于CSS3 transition属性详解的主要内容，如果未能解决你的问题，请参考以下文章