CSS3 动画系列1-动画基础

10年5月份写过 ,那时候CSS3 动画基本上只有webkit内核的浏览器,如今CSS3已经大量的被应用到各种项目中,并且逐渐成为前端开发工程师的必备技能。虽然在项目中也经常用CSS3来优化一些体验,但是总觉的自己掌握的不够,所以最近温故知新,总结一下。欢迎大家拍砖讨论。

归纳总结了一下,我们口中说的CSS3 动画包括两种类型:

  1. Transition-过渡
  2. Animation-动画

他们都使我们的网页“动”起来了,两者功能类似,不过两者存在着一下细微的差别:

Transition(过渡)是通过定义元素从 起点的状态 和 结束点的状态 ,在一定的时间区间内实现元素平滑地过渡或变化 的一种补间动画机制。

而Animation(动画)不仅可以定义元素从 起点的状态 和 结束点的状态,而且他可以定义元素 在任意两个点之间的关键帧(Keyframes)的状态,在指定的时间内实现元素平滑地过渡或变化 的一种补间动画机制。

使用transition制作一个简单的transition效果时,元素包括了起点状态的属性和结束点状态的属性,一个开始执行动画时间(transition-delay)和一个延续动作时间(transition-duration)以及动作的变换速率(transition-timing-function),这样就可以进行一个简单的动画了。如果我们要控制的更细一些,比如说我要第一个时间段执行什么动作,第二个时间段执行什么动作,这样我们用Transition就很难实现了,此时我们需要关键帧(Keyframes)来更加精确的控制,在指定的时间内在关键帧(Keyframes)之间,实现元素平滑地过渡或变化 。

画了两个示意图:

Transition(过渡)示意图,1秒时间内只改某元素的颜色:

01

 

接下来是Animation(动画)示意图,前1秒时间内使元素变大,后2秒改变元素的颜色,并且使元素变为原来的大小:

02

其实Transition(过渡)下的?起点 和 结束点也可以理解为关键帧,只不过这两点间不能定义关键帧,而Animation可以起点 和 结束点之间定义任意的关键帧。至于动画是在指定的时间内,元素在两个关键帧之间 实现平滑地过渡或变化 的一种补间动画机制。当如动画的前提是元素在两个关键帧下状态存在差异,即使是很小的差异,当然我们的肉眼可能看不出来。

要是你以前做过flash动画,理解Transition(过渡)和Animation(动画)应该非常简单。如果我写的你理解不了,那么你可以看看这个?flash动作补间动画的视频教程?。

赞(0) 打赏
未经允许不得转载:WEB前端开发 » CSS3 动画系列1-动画基础

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏