CSS3动画（一）、transition过渡效果； + 示例

绝地灬酷狼 2022-03-16 08:42 358阅读 0赞

![在这里插入图片描述][70]

支持 transition 的浏览器，兼容性图表：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZyZWVkb21WZW5seQ_size_16_color_FFFFFF_t_70]  
transition 是简写属性，可以一次同时写下面4个属性的值；一般也推荐直接简写；

transition-property 规定应用过渡的 CSS 属性的名称。（宽、高、边距、颜色等）  
默认值：all

transition-duration 定义过渡效果花费的时间。  
默认值： 0

transition-timing-function 规定过渡效果的时间曲线。  
默认值： ease （由慢到快，再到慢）  
其他值：  
linear （匀速，最常用），  
ease-in（慢速开始），  
ease-out （慢速结束），  
ease-in-out （慢速开始和结束）  
cubic-bezier(n,n,n,n) （自己设定快慢速度，4个值缺一不可， 只能是 0-1 的数值，数值越小速度越快）

transition-delay 规定过渡效果何时开始。  
默认值：0

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <style>
            ul{border-bottom: 1px solid #ccc;}
            ul:after{display: table;content: " ";clear: both;}
            ul>li{
                float: left;
                list-style: none;
            }
            a{
                display: block;
                width:60px;
                height:25px;
                margin: 10px 10px 0;
                padding: 10px;
                text-decoration: none;
                border: 1px solid #ccc;
                border-bottom: 0;
                text-align: center;
                color: #435153;
                /*定义过渡要求*/
                transition: all .5s linear;
            }
    
            /*过渡动画最后效果*/
            a:hover {   
                background:#aaefff;		/*颜色效果*/
                margin-top: 0;		/*位置移动*/
                height: 35px;		/*位置移动*/
            }
        </style>
    </head>
    <body>
    
    <ul>
        <li><a href="#">标题11</a></li>
        <li><a href="#">标题22</a></li>
        <li><a href="#">标题33</a></li>
    </ul>
    
    </body>
    </html>

[70]: /images/20220316/cde1125066444c7fb2d7cc12ca964be5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZyZWVkb21WZW5seQ_size_16_color_FFFFFF_t_70]: /images/20220316/4ad60a202a354de4aa4f751206753137.png