过渡元素transition的那些事儿-前端--易笔记

之前看了一些教程，虽然会用，但是总感觉哪里没有太弄清楚，这次终于弄清楚了，来分享一下，其实简单的不行。不知道有些人为什么写的那么复杂

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <title>Document</title>  
    <style>  
    p{  
        width: 200px;  
        height:200px;  
        border:1px solid red;  
        float: left;  
        margin:20px;  
        text-align: center;  
        line-height: 200px;  
    }  
    /*transion前面是需要改变的样式，后面是持续的时间*/  
    .p1{  
        color: blue;  
        background:orange;  
        transition: background 1s,color 1s;  
    /*如果想有很多的样式需要过渡，一个一个写也太累的，那么就采用transition:all 0.5s*/  
    }  
    /*改变后的效果*/  
    .p1:hover{  
        color: red;  
        background:green;  
    }  
    </style>  
</head>  
<body>  
    <p class="p1">hello world</p>  
</body>  
</html>

后面其实只需要两个值就可以，一个是想要变化的样式，一个是持续的时间。如果你需要改变的样式太多，那么就可以通过all来实现。这样的变换其实可以满足50%的需求。

下面在进行一点简单的补充，就是变换时候变换速度的控制：

ease-in-out：刚开始速度慢，然后加速，最后慢下来

linear:速度一直恒定

ease-in：过渡开始慢，然后以恒定的速度运行

ease-out：速度刚开始恒定，后面慢下来

cubic-bezier:贝塞尔曲线(感兴趣的可以研究)

使用方法如下：

transition:all 0.5s ease-in;

上面的大概可以满足80%的需求了，最后还有一点就是为这个动画添加延时，也就是在等待多久以后才执行，代码如下：

transition:all 0.5s ease-in 0.2s

时间：2017/7/14 16:12:02