CSS的过渡效果及动画效果:transition&animation
2015-09-22 14:11
761 查看
最近做了一个全屏分页滚动效果的页面,其中运用到一些关于动画的元素。其实之前对于transition、animation、transform就总是有点混淆,也花过一段时间来研究他们之间具体的区别,但是时隔已久,这次用的时候发现还是有很多属性不了解,因此决定整理一篇关于动画和过渡的文章。
transition、animation、transform我的理解分别是:过渡、动画以及变换。因为前两者的功能较为接近,所以在这篇文章里,我主要整理transition和animation的使用方法。
transition是一个简写属性,用于设置四个过渡属性:
transition-property
规定设置过渡效果的css属性名称
none 没有属性会获得过渡效果
all 所有属性都获得过渡效果
property 定义应用过渡效果的css属性名称列表,列表以逗号分隔
transition-duration
规定完成过渡效果需要多少秒或毫秒
必须设置,否则时长为0,则不产生过渡效果
transition-timing-function
规定过渡效果的速度曲线,默认值为:ease
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
规定过渡效果何时开始,即过渡效果开始前需等待的时间,默认值:0
基本结合滑过、点击、焦点事件使用,无法在网页加载时自动发生(除非结合js)
一次性,不能重复发生,除非一再触发
只能定义开始和结束状态,不能定义中间状态,即只有两个状态
animation是一个简写属性,用于设置以下几个动画属性:
animation- name
为 @keyframes(关键帧) 动画规定一个名称
none 规定无动画效果(可用于覆盖来自级联的动画)
keyframename规定需要绑定到选择器的keyframe的名称
animation -duration
规定完成动画所花费的时间
必须设置,否则时长为0,则没有动画效果
animation -timing-function
规定动画效果的速度曲线,默认值为:ease
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
transition、animation、transform我的理解分别是:过渡、动画以及变换。因为前两者的功能较为接近,所以在这篇文章里,我主要整理transition和animation的使用方法。
Transition
1.定义和用法
transition的使用在于让元素的变化有一个过渡的过程,即可以指定状态变化所需要的时间。transition是一个简写属性,用于设置四个过渡属性:
transition-property
规定设置过渡效果的css属性名称
none 没有属性会获得过渡效果
all 所有属性都获得过渡效果
property 定义应用过渡效果的css属性名称列表,列表以逗号分隔
transition-duration
规定完成过渡效果需要多少秒或毫秒
必须设置,否则时长为0,则不产生过渡效果
transition-timing-function
规定过渡效果的速度曲线,默认值为:ease
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
规定过渡效果何时开始,即过渡效果开始前需等待的时间,默认值:0
2.transition的局限性
需要事件触发基本结合滑过、点击、焦点事件使用,无法在网页加载时自动发生(除非结合js)
一次性,不能重复发生,除非一再触发
只能定义开始和结束状态,不能定义中间状态,即只有两个状态
Animation
1.定义和用法
animation与transition的效果很类似,但是animation可以很好的避免上述所说的transition的局限性。animation是一个简写属性,用于设置以下几个动画属性:
animation- name
为 @keyframes(关键帧) 动画规定一个名称
none 规定无动画效果(可用于覆盖来自级联的动画)
keyframename规定需要绑定到选择器的keyframe的名称
animation -duration
规定完成动画所花费的时间
必须设置,否则时长为0,则没有动画效果
animation -timing-function
规定动画效果的速度曲线,默认值为:ease
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
相关文章推荐
- CSS选择器
- css初始化代码
- NPOI之Excel——合并单元格、设置样式、输入公式
- css 控制第二行字段縮進
- CSS样式常用的兼容hack写法
- 关于css3背景图片渐变的规则
- 初学css遇到的值得记载的
- NPOI创建Excel﹑合并单元格﹑设置单元格样式﹑边框
- JS+CSS实现类似QQ好友及黑名单效果的树型菜单
- 【css老版本浏览器兼容利器】ie-css3.htc
- 纯CSS绘制三角形(多个角度)
- css--左右visibility建立 “collapse”值问题
- CSS技巧
- 一点css技巧和对iOS delegate的理解
- css定位
- CSS中float的应用
- bfc样式控制
- 关于css排版的一些属性
- CSS浮动与定位
- JS+CSS实现类似QQ好友及黑名单效果的树型菜单