CSS的过渡效果及动画效果：transition&animation

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/Seven521m/article/details/48653517

最近做了一个全屏分页滚动效果的页面，其中运用到一些关于动画的元素。其实之前对于transition、animation、transform就总是有点混淆，也花过一段时间来研究他们之间具体的区别,但是时隔已久，这次用的时候发现还是有很多属性不了解，因此决定整理一篇关于动画和过渡的文章。

transition、animation、transform我的理解分别是：过渡、动画以及变换。因为前两者的功能较为接近，所以在这篇文章里，我主要整理transition和animation的使用方法。

Transition

1.定义和用法

transition的使用在于让元素的变化有一个过渡的过程，即可以指定状态变化所需要的时间。

transition是一个简写属性，用于设置四个过渡属性：

•  transition-property

规定设置过渡效果的css属性名称

1. none 没有属性会获得过渡效果
2. all 所有属性都获得过渡效果
3. property 定义应用过渡效果的css属性名称列表，列表以逗号分隔

• transition-duration

规定完成过渡效果需要多少秒或毫秒
必须设置，否则时长为0,则不产生过渡效果

• transition-timing-function

规定过渡效果的速度曲线，默认值为：ease

1. linear 匀速（等于 cubic-bezier(0,0,1,1)）
2. ease 先加速后减速（等于 cubic-bezier(0.25,0.1,0.25,1)）
3. ease-in 加速（等于 cubic-bezier(0.42,0,1,1)）
4. ease-out 减速（等于 cubic-bezier(0,0,0.58,1)）
5. ease-in-out 等同类似于ease（等于 cubic-bezier(0.42,0,0.58,1)）
6. 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（关键帧） 动画规定一个名称

1. none 规定无动画效果（可用于覆盖来自级联的动画）
2. keyframename规定需要绑定到选择器的keyframe的名称

• animation -duration

规定完成动画所花费的时间
必须设置，否则时长为0,则没有动画效果

• animation -timing-function

规定动画效果的速度曲线，默认值为： ease

1. linear 匀速（等于 cubic-bezier(0,0,1,1)）
2. ease 先加速后减速（等于 cubic-bezier(0.25,0.1,0.25,1)）
3. ease-in 加速（等于 cubic-bezier(0.42,0,1,1)）
4. ease-out 减速（等于 cubic-bezier(0,0,0.58,1)）
5. ease-in-out 等同类似于ease（等于 cubic-bezier(0.42,0,0.58,1)）
6. cubic-bezier(n,n,n,n) 在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值

• animation -delay

规定动画效果何时开始

• animation –iteration-count

定义动画的播放次数

1. n 定义动画播放的数值
2. infinite 规定动画应该无限次播放

• animation –direction

定义是否轮流反向播放动画

1. normal 默认值。动画正常播放
2. alternate动画应该轮流反向播放

• animation –play-state（目前支持该属性的浏览器较少）

检索或设置对象动画的状态

1. running 默认值。规定动画正在播放
2. paused规定动画已暂停

• animation –fill-mode（目前支持该属性的浏览器较少）

检索或设置对象动画时间之外的状态

1. none 默认值。不设置对象动画之外的状态（不改变默认行为）
2. forwards设置对象状态为动画结束时的状态（在最后一个关键帧中定义）
3. backwards 设置对象状态为动画开始时的状态（在 animation-delay 所指定的一段时间内，在动画显示之前，应用开始属性值（在第一个关键帧中定义）。）
4. both设置对象状态为动画结束或开始的状态（向前和向后填充模式都被应用）

本文基本是将W3C的属性介绍进行了整合，有表述不正确的地方，欢迎指正。

参考网址及延伸阅读：
Wscschool

http://www.ruanyifeng.com/blog/2014/02/css_transition_and_animation.html

http://www.zhangxinxu.com/wordpress/?p=1268