码迷,mamicode.com
首页 > Web开发 > 详细

CSS3 transition属性详解

时间:2018-04-28 14:06:49      阅读:221      评论:0      收藏:0      [点我收藏+]

标签:order   property   UNC   text   delay   webkit   ext   tle   16px   

CSS3 transition详解

  transition:[ transition-property ] [ transition-duration ] [ transition-timing-function ] [ transition-delay ]

  transition的取值介绍:

    [ transition-property ]:检索或设置对象中的参与过渡的属性

    [ transition-duration ]:检索或设置对象过渡的持续时间

    [ transition-timing-function ]:检索或设置对象中过渡的动画类型,主要有6个值如下:

  1. ease(逐渐变慢),默认值
  2. linear(匀速)
  3. ease-in(加速)
  4. ease-out(减速),跟ease的区别是,减速的变化程度不一样。
  5. ease-in-out(先加速,再减速)
  6. 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属性详解

标签:order   property   UNC   text   delay   webkit   ext   tle   16px   

原文地址:https://www.cnblogs.com/firstflying/p/8966706.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!