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属性详解
原文地址：https://www.cnblogs.com/firstflying/p/8966706.html