核心提示：之前看了一些教程，虽然会用，但是总感觉哪里没有太弄清楚，这次终于弄清楚了，来分享一下，其实简单的不行。不知道有些人为什么写的那么复杂!DOCTYPE htmlhtml lang=enheadmeta ...
之前看了一些教程，虽然会用，但是总感觉哪里没有太弄清楚，这次终于弄清楚了，来分享一下，其实简单的不行。不知道有些人为什么写的那么复杂
<!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
