2016-07-21 09:16
CSS3 transition 属性过渡效果简介及多属性写法
本篇文章用来介绍CSS3动画属性中的transition：用于 CSS 元素的属性值在一定的时间区间内平滑地过渡，通常用于制作一些触发式的动画效果，这种效果可以再鼠标单击、获得焦点、被点击或对元素任何改变中等情况触发使用。
下面我们来简单的线从最基础的语法和属性值来一步一步学习：
基础语法是：transition: property duration timing-function delay;
transition 属性其实是一个简写属性，用于设置四个过渡属性：
transition-property：规定设置过渡效果的 CSS 属性的名称。
transition-duration：规定完成过渡效果需要多少秒或毫秒。
transition-timing-function：规定速度效果的速度曲线。
transition-delay：定义过渡效果何时开始。
例如：我们需要制作一个DIV，移动到元素上，背景色做渐变：
<!DOCTYPE html>
<html>
<head>
<style>
div{
width: 100px; height: 100px;
background: blue;
transition: background 2s;
-moz-transition: background 2s; /* Firefox 4 */
-webkit-transition: background 2s; /* Safari and Chrome */
-o-transition: background 2s; /* Opera */
}
div:hover{
background: red;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
效果图
同理，我们如果想制作宽度的渐变，也就是调整一下属性罢了：
<!DOCTYPE html>
<html>
<head>
<style>
div{
width: 100px; height: 100px;
background: blue;
transition: width 2s;
-moz-transition: width 2s; /* Firefox 4 */
-webkit-transition: width 2s; /* Safari and Chrome */
-o-transition: width 2s; /* Opera */
}
div:hover{
width: 200px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
效果图
下面看看多属性写法，如果我们同时改变宽度和高度，写法如下：
<!DOCTYPE html>
<html>
<head>
<style>
div{
width: 100px; height: 100px;
background: blue;
transition: width 2s,height 2s;
-moz-transition: width 2s,height 2s; /* Firefox 4 */
-webkit-transition: width 2s,height 2s; /* Safari and Chrome */
-o-transition: width 2s,height 2s; /* Opera */
}
div:hover{
width: 200px; height: 200px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
效果图
注：想必大家看到刚刚的写法应该都有一个疑问，那就是-moz-transition等属性又是什么。
其实transition的浏览器兼容性只支持： Internet Explorer 10、Firefox、Opera 和 Chrome 支持 transition 属性。
而Firefox 4、Safari and Chrome、Opera等属性就要额外利用这些属性去兼容。
Internet Explorer 9及更古老的版本，还是老老实实用javascript吧。
