最近做了一个全屏分页滚动效果的页面,其中运用到一些关于动画的元素。其实之前对于transition、animation、transform就总是有点混淆,也花过一段时间来研究他们之间具体的区别,但是时隔已久,这次用的时候发现还是有很多属性不了解,因此决定整理一篇关于动画和过渡的文章。
transition、animation、transform我的理解分别是:过渡、动画以及变换。因为前两者的功能较为接近,所以在这篇文章里,我主要整理transition和animation的使用方法。
Transition
1.定义和用法
transition的使用在于让元素的变化有一个过渡的过程,即可以指定状态变化所需要的时间。transition是一个简写属性,用于设置四个过渡属性:
- transition-property
规定设置过渡效果的css属性名称
- none 没有属性会获得过渡效果
- all 所有属性都获得过渡效果
- property 定义应用过渡效果的css属性名称列表,列表以逗号分隔
- transition-duration
必须设置,否则时长为0,则不产生过渡效果
- transition-timing-function
- linear 匀速(等于 cubic-bezier(0,0,1,1))
- ease 先加速后减速(等于 cubic-bezier(0.25,0.1,0.25,1))
- ease-in 加速(等于 cubic-bezier(0.42,0,1,1))
- ease-out 减速(等于 cubic-bezier(0,0,0.58,1))
- ease-in-out 等同类似于ease(等于 cubic-bezier(0.42,0,0.58,1))
- cubic-bezier(n,n,n,n) 在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值
- transition-delay
2.transition的局限性
- 需要事件触发
基本结合滑过、点击、焦点事件使用,无法在网页加载时自动发生(除非结合js)
- 一次性,不能重复发生,除非一再触发
- 只能定义开始和结束状态,不能定义中间状态,即只有两个状态
Animation
1.定义和用法
animation与transition的效果很类似,但是animation可以很好的避免上述所说的transition的局限性。animation是一个简写属性,用于设置以下几个动画属性:
- animation- name
- none 规定无动画效果(可用于覆盖来自级联的动画)
- keyframename规定需要绑定到选择器的keyframe的名称
- animation -duration
必须设置,否则时长为0,则没有动画效果
- animation -timing-function
- linear 匀速(等于 cubic-bezier(0,0,1,1))
- ease 先加速后减速(等于 cubic-bezier(0.25,0.1,0.25,1))
- ease-in 加速(等于 cubic-bezier(0.42,0,1,1))
- ease-out 减速(等于 cubic-bezier(0,0,0.58,1))
- ease-in-out 等同类似于ease(等于 cubic-bezier(0.42,0,0.58,1))
- cubic-bezier(n,n,n,n) 在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值
- animation -delay
- animation –iteration-count
- n 定义动画播放的数值
- infinite 规定动画应该无限次播放
- animation –direction
- normal 默认值。动画正常播放
- alternate动画应该轮流反向播放
- animation –play-state(目前支持该属性的浏览器较少)
- running 默认值。规定动画正在播放
- paused规定动画已暂停
- animation –fill-mode(目前支持该属性的浏览器较少)
- none 默认值。不设置对象动画之外的状态(不改变默认行为)
- forwards设置对象状态为动画结束时的状态(在最后一个关键帧中定义)
- backwards 设置对象状态为动画开始时的状态(在 animation-delay 所指定的一段时间内,在动画显示之前,应用开始属性值(在第一个关键帧中定义)。)
- both设置对象状态为动画结束或开始的状态(向前和向后填充模式都被应用)
本文基本是将W3C的属性介绍进行了整合,有表述不正确的地方,欢迎指正。
参考网址及延伸阅读:
Wscschool
http://www.ruanyifeng.com/blog/2014/02/css_transition_and_animation.html
http://www.zhangxinxu.com/wordpress/?p=1268