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

在这里插入图片描述

支持 transition 的浏览器，兼容性图表：
在这里插入图片描述
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>

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

猜你喜欢