CSS3动画Transition属性详解及示例演示

今天来学习一下 CSS3 的动画效果 Transition，CSS3 规定 transition 允许CSS的属性值在一定的时间区间内平滑地过渡，这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发，并圆滑地以动画效果改变CSS的属性值。

一、transition 兼容写法

W3C 标准写法：元素选择器 { transition: 运动样式 持续时间 运动形式 延迟时间; }

Mozilla内核：元素选择器 { -moz-transition: 运动样式 持续时间 运动形式 延迟时间; }

Webkit内核：元素选择器 { -webkit-transition: 运动样式 持续时间 运动形式 延迟时间; }

Opera内核：元素选择器 { -o-transition: 运动样式 持续时间 运动形式 延迟时间; }

二、transition各属性解释

1、transition-property 运动样式

语法：

transition-property :all || [attr] || none

注释：

a、all：元素产生任何属性值变化时都将执行 transition 效果
b、attr：指定要运动的样式
c、none：transition 马上停止执行

2、transition-duration 持续时间

transition-duration 是指定元素转换过程的持续时间，单位为秒(s)，此属性可以作用于所有元素，包括 :before 和 :after 伪元素。

默认值是 0，即时变换。

3、transition-timing-function 指定运动形式

语法：

transition-timing-function ： ease || linear || ease-in() | ease-out || ease-in-out || cubic-bezier(n, n, n, n)

注释：

a、linear：以匀速开始至结束的过渡效果，相当于 cubic-bezier(0,0,1,1)
b、ease：以慢速开始，然后变快，再以慢速结束的过渡效果，相当于 cubic-bezier(0.25,0.1,0.25,1)
c、ease-in：加速的过渡效果，相当于 cubic-bezier(0.42,0,1,1)
d、ease-out：减速的过渡效果，相当于 cubic-bezier(0,0,0.58,1)
e、ease-in-out：先加速再减速的效果，相当于 cubic-bezier(0.42,0,0.58,1)
f、cubic-bezier(n, n, n, n)：自定义一个时间曲线，n 为 0 至 1 之间的值

4、transition-delay 延迟时间

transition-delay是用来指定一个动画开始执行的时间，也就是说当改变元素属性值后多长时间开始执行transition效果，单位为s(秒)，其使用和transition-duration极其相似，也可以作用于所有元素，包括:before和:after伪元素。

默认值是 0，也就是变换立即执行，没有延迟。

三、实例演示

最后看一下实例，鼠标滑过，图片放大并微微侧旋。Demo演示效果

<style>
.listImage {
	overflow:hidden; width:440px; margin:0 auto;
}

.listImage img {
	max-width:100% !important; height:auto; margin-bottom:19px;
}

.listImage a img {
	transition:all .4s ease-in-out; -webkit-transition:all .4s ease-in-out;
}

.listImage a:hover img {
	transform:rotate(8deg) scaleX(1.9) scaleY(1.9); -webkit-transform:rotate(8deg) scaleX(1.9) scaleY(1.9);
}
</style>


<div class="listImage">
	<a href="https://yangjunwei.com" target="_blank">
		<img width="620" height="200" src="http://ww4.sinaimg.cn/mw690/418acfafjw1exlstb25wbj20c806yjs8.jpg" alt="?B???">
	</a>
</div>