• Register

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="http://yangjunwei.com" target="_blank">
		<img width="620" height="200" src="http://ww4.sinaimg.cn/mw690/418acfafjw1exlstb25wbj20c806yjs8.jpg" alt="?B???">
	</a>
</div>
版权声明:转载请注明来自杨俊伟博客,本文地址:http://yangjunwei.com/a/2083.html
除非注明,杨俊伟博客文章均为原创,转载请注明出处和链接!
 

发表评论 

我还是想用邮箱注册

登录

忘记密码 ?

用第三方帐号快捷登录

已有账户?前往登录吧~

注册