CSS3 transitions
- CSS3的过渡就是平滑的改变一个元素的CSS值，是元素从一个样式逐渐过渡到另一个样式。
- CSS3过渡使用transition属性来定义，transition属性的基本语法如下所示：
transition：prpperty duration timing-function delay;
1.属性解释
transition-property：应用过渡的CSS属性的名称。
none：没有属性会获得过渡效果；
all：默认值，所有属性都将获得过渡效果；
property：定义应用过渡效果的CSS属性名称列表transition-duration：过渡效果需要的时间。以秒或毫秒计，默认值为0，表示没有效果transition-timing-function:过渡效果的世界曲线。
linear：规定以相同速度开始至结束的过渡效果；
ease：默认值，规定慢速开始，然后变快，然后慢速结束的过渡效果；
ease-in：规定以慢速开始的过渡效果；
ease-out：规定以慢速结束的过渡效果；
ease-in-out：规定以慢速开始和结束的过渡效果；
cubic-bezier(n,n,n,n):在cubic-bezier函数中定义自己的值，可能的值是0至1之间的数值。transition-delay：效果开始之前需要等待的时间
2.示例如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS 过渡</title>
<style>
body {
margin: 0;
padding: 0;
background-color: #F7F7F7;
}
.transition {
width: 200px;
height: 200px;
margin: 50px auto;
background-color: green;
transition: all 4s;
}
.transition:hover {
background-color: yellow;
}
</style>
</head>
<body>
<div class="transition"></div>
</body>
</html>
效果如下：
开始前：
鼠标停留后：
