CSS3 animation

原创 青春正当时 随笔 css 226阅读 2019-01-04 17:10:54 举报

CSS3 animation介绍

本篇介绍的animation属性和传统的动画制作一样,能控制帧的每一步,制作出更强大的动画效果。

和其他CSS3属性类似,animation包含很多子属性,我们一起看看:

  • animation-name
  • animation-duration
  • animation-timing-function
  • animation-delay
  • animation-iteration-count
  • animation-direction
  • animation-play-state
  • animation-fill-mode
  • @keyframes

属性

animation-name指定@keyframes的名字,CSS加载时会应用该名字的@keyframes规则来实现动画

animation-duration动画持续时间,默认是0表示无动画,单位可以设s秒或ms毫秒

animation-timing-function动画播放方式,默认值ease,可以设lineareaseease-inease-outease-in-outcubic-bezier(n,n,n,n)steps。关于贝塞尔曲线和steps可以参照上一篇transition,和transition-timing-function类似,不多赘述。

animation-delay延迟开始动画的时间,默认值是0,表示不延迟,立即播放动画。单位是s秒或ms毫秒。允许设负时间,意思是让动画动作从该时间点开始启动,之前的动画不显示。例如-2s 使动画马上开始,但前 2 秒的动画被跳过。

animation-iteration-count动画循环播放的次数,默认值为1,即放完一遍后不循环播放。除数字外也可以设关键字infinite表示无限循环播放。

animation-direction动画播放的方向,可设normalalternatealternate-reverse。默认值是normal表示正常播放动画。alternate表示轮转正反向播放动画,即动画会在奇数次(1,3,5…)正常播放,而在偶数次(2,4,6…)反向播放。alternate-reverse正好反过来,奇数次反向播动画,偶数次正向播动画。看效果点这里

有什么用呢?其实例子页面就能看到alternate/alternate-reverse的动画效果可以平滑地实现反转效果。例如例子页面中闪烁提示的例子。你可以用text-decoration: blink来实现闪烁,但它的功能有限支持有限。用CSS3动画实现的闪烁效果更棒。(当然闪烁的使用必须克制,要定时定次数,不能无限闪。无限闪通常会让用户很生气后果很严重):

animation-play-state动画的状态,可设runningpaused。默认值running表示正在播放动画,paused表示暂停动画。通常在JS端使用该属性object.style.animationPlayState=”paused”来暂停动画。

animation-fill-mode动画的时间外属性,可设noneforwardsbackwardsboth。默认值none表示动画播完后,恢复到初始状态。forwards当动画播完后,保持@keyframes里最后一帧的属性。backwards表示开始播动画时,应用@keyframes里第一帧的属性,要看出效果,通常要设animation-delay延迟时间。both表示forwards和backforwards都应用。

例如设置2s的延迟时间。初始为红色,第一帧动画变为绿色,最后一帧动画变为蓝色。看效果点这里

图1不解释了,最正常的效果,初始为红色,动画开始成绿色,动画结束成蓝色,结束后恢复初始状态红色。图2设成forwards,和图1的区别是动画结束后不恢复初始状态,仍旧是蓝色。图3设成backwards,在动画开始前(即延迟时间段内)应用第一帧的动作,设成了绿色,动画结束后恢复原始状态。图4设成both兼具forwards和backwards的效果。

@keyframes动画帧就是区别animation和transition的关键。在transition中是无法更细致地控制时间段内执行的动作的,而在animation中用@keyframes可以细致地指定第一帧要干什么,第二帧要干什么。

语法:@keyframes开头,后接animation-name。实体内可以创建%百分比来划分时间段。关键字from等于0%,to等于100%。

为节约篇幅,各种浏览器前缀均省略,如Firefox用@-moz-keyframes,Chrome和Safari用@-webkit-keyframes,Opera用@-o-keyframes。提醒一下@keyframes只是定义了一个动画效果,但要使动画生效,必须用animate属性将动画绑定到具体某DOM元素上才行。

你可以单独指定上面这些子属性,也可以像background等属性一样,合并在animation属性里指定。例如animation: moveten 1s step(10,end) infinite alternate 3s backwards;。但合并时要注意,因为有animation-duration和animation-delay都是时间,浏览器会根据先后顺序,将第一个时间认作为animation-duration,第二个时间认作为animation-delay。

分开指定可能代码清晰点,但因为页面需要适应各浏览器时,每个都要加上-ms,-moz等前缀的话代码会变的很多,合并在一起代码稍微少点。

另外也可以同时指定多个动画效果,例如animation: moveten1 1s ease .5s, moveten2 2s ease 1s forwards;

总结

animation的参数不算多,但知道理论是一回事,能否写出精妙的动画效果是另一回事。除非你特有天赋,否则可以借鉴牛人们的设计。例如Dan Edenanimate.css动画库,里面设计出的贝塞尔曲线能让动画效果非常逼真。

CSS3里三大动画相关属性transform,transition,animation基本内容就介绍完了。有些子属性如果不明白原理的话,代码给你都很难改,更别说自己写。现在看到酷炫的动画效果,可以试着看看源码,并对照着改成自己想要的效果。下一篇将介绍一些常见实用的动画效果。

Animation 组成

CSS3 Animation 是由三部分组成。

1.关键帧(@keyframes)

  • 关键帧(keyframes) - 定义动画在不同阶段的状态。
  • 动画属性(properties) - 决定动画的播放时长,播放次数,以及用何种函数式去播放动画等。(可以类比音视频播放器)
  • css属性 - 就是css元素不同关键帧下的状态。

下面我们来看一个例子。
创建了一个@keyframes命名为dropdown。

  • 关键帧主要分为3个阶段,0%、50%、100%。
  • 动画播放时长为6s、循环播放(infinite)、以linear方式进行播放。
  • 修改的元素属性为margin-top

查看源码
MDN参考网站

需要注意!当属性的个数不确定时:

当我们在定义不同关键帧,元素属性的个数是一个变化的值。
如果一个关键帧的属性,没有出现在其他关键帧的时候,那么这些属性将会使用上一帧的默认值。
区别在于,缺省之后的渐变效果是不会出现的。比如下面两种写法,

语法

@keyframes keyframes-name {
[ [ from | to | <百分比> ][, from | to | <百分比> ] block ]
}
keyframes-name
帧列表的名称。 名称必须符合 CSS 语法中对标识符的定义。
from 等效于 0%.

to 等效于 100%.

2.动画属性

动画属性可以理解为播放器的相关功能,一个最基本的播放器应该具有:播放/暂停、播放时长、播放顺序(逆序/正序/交替播放)、循环次数等。
主要也分为两大点:

  • 指定播放的元素
  • 定义播放信息的配置

动画源码

简写属性形式:

animation:
[animation-name]/[animation-duration] //动画的名称、持续时间

[animation-timing-function]/[animation-dely] //关于时间的函数(properties/t)、持续时间

[animation-iteration-count]/[animation-direction] //播放次数、播放顺序

[animation-fill-mode]/[animation-play-state] //播放前或停止后设置相应样式、控制动画运行或暂停

MDN参考文档

1.时间函数(animation-timing-function)

animation-timing-function属性定义了动画的播放速度曲线。

可选配置参数为:ease(默认值)、ease-in、 ease-out、 ease-in-out、 liner、 cubic-bezier(number, number, number, number)

动画效果源码

2.动画方向(animation-direction)

animation-direction属性表示CSS动画是否反向播放。

可选配置参数为:single-animation-direction = normal(正序播放) | reverse(倒序播放) | alternate(交替播放) | alternate-reverse(反向交替播放)

动画源码

3.动画延迟(animation-delay)

animation-delay属性定义动画是从何时开始播放,即动画应用在元素上的到动画开始的这段时间的长度。
默认值0s,表示动画在该元素上后立即开始执行。
该值以秒(s)或者毫秒(ms)为单位。

4.动画迭代次数(animation-iteration-count)

animation-iteration-count该属性就是定义我们的动画播放的次数。次数可以是1次或者无限循环。

默认值只播放一次。

5.动画填充模式(animation-fill-mode)

animation-fill-mode是指给定动画播放前后应用元素的样式。

6.动画播放状态(animation-timing-function)

animation-play-state: 定义动画是否运行或者暂停。可以确定查询它来确定动画是否运行。
默认值为running

SVG动画实践

动画实践

分享一些CSS3动效网站:

Animation.css 一个很全的CSS3的动效库,可以尝试看看源码进行学习。
CreateJS 里面的特效做得也很不错,有很多酷炫的样例。
国外css3网页 布局很优雅的网站
USAToday 也是一个很酷炫的国外网站
peekabeat 很清爽的界面
heartbeat 交互很棒的网站
dances 貌似是交响乐的网站主页
reative 很有时代感的网站

animation 在线animation编辑器

css3动画简介以及动画库animate.css的使用

从广义上来讲,css3动画可以分为两种。

过渡动画

​ 第一种叫过渡(transition)动画,就是从初始状态过渡到结束状态这个过程中所产生的动画。所谓的状态就是指大小、位置、颜色、变形(transform)等等这些属性。css过渡只能定义首和尾两个状态,所以是最简单的一种动画。

要想使一个元素产生过渡动画,首先要在这个元素上用transition属性定义动画的各种参数。可定义的参数有

transition-property:规定对哪个属性进行过渡

transition-duration:定义过渡的时间,默认是0

transition-timing-function:定义过渡动画的缓动效果,如淡入、淡出等,默认是 ease

transition-delay:规定过渡效果的延迟时间,即在过了这个时间后才开始动画,默认是0

为了书写方便,也可以把这四个属性按照以上顺序简写在一个 transition 属性上:

如果是使属性的默认值,则可以省略:

相当于:

如果想要同时过渡多个属性,可以用逗号隔开,如:

使用transtion属性只是规定了要如何去过渡,要想让动画发生,还得要有元素状态的改变。如何改变元素状态呢,当然就是在css中给这个元素定义一个类(:hover等伪类也可以),这个类描述的是过渡动画结束时元素的状态。

这样,当我们把鼠标移动到div上的时候,div的状态发生了变化,就能看到宽度从100到400,高度从100到400,背景颜色从黑到红的,过渡时间为3秒的过渡效果了。

除了使用hover等系统提供的伪类外,我们也可以随意的定义自己的类,然后想要过渡时就通过js把类加到元素上面:

关键帧动画

​ 第二种叫做关键帧(keyframes)动画。不同于第一种的过渡动画只能定义首尾两个状态,关键帧动画可以定义多个状态,或者用关键帧来说的话,过渡动画只能定义第一帧和最后一帧这两个关键帧,而关键帧动画则可以定义任意多的关键帧,因而能实现更复杂的动画效果。

关键帧动画的定义方式也比较特殊,它使用了一个关键字 @keyframes 来定义动画。具体格式为:

@keyframes 动画名称{

​ 时间点 {元素状态}

​ 时间点 {元素状态}

​ …

}

例如:

​ 这段代码定义了一个名为demo,且有5个关键帧的动画。0% ,10% 等这些表示的是时间点,是相对于整个动画的持续时间来说的,时间点之后的花括号里则是元素的状态属性集合,描述了这个元素在这个时间点的状态,动画发生时,就是从第一个状态到第二个状态进行过渡,然后从第二个状态到第三个状态进行过渡,直到最后一个状态。一般来说,0%和100%这两个关键帧是必须要定义的。

关键帧的书写方式很灵活,一行可以写多个关键帧。

甚至它们之间的空格也是可以不要的。

现在我们知道了怎么去定义一个关键帧动画了,那怎么去实现这个动画呢?其实很简单,只要把这个动画绑定到某个要进行动画的元素上就行了。

把动画绑定到元素上,我们可以使用animation属性。animation属性有以下这些:

animation-name规定@keyframes动画的名称
animation-duration规定动画完成一个周期所花费的秒或毫秒 默认是0
animation-timing-function规定动画的速度曲线 默认是 ease
animation-delay规定动画何时开始 默认是0
animation-iteration-count规定动画被播放的次数 默认是1
animation-direction规定动画是否在下一周期逆向地播放 默认是normal
animation-play-state规定动画是否正在运行或暂停 默认是 running
animation-fill-mode规定对象动画时间之外的状态

像前面讲的transition属性一样,也可以把这些animation属性简写到一个animation中,使用默认值的也可以省略掉。但 animation-play-state 属性不能简写到animation中。

只要像这样把定义好的动画绑定到元素上,就能实现关键帧动画了,而不是像第一种过渡动画那样,需要一个状态的改变才能触发动画。

--------------------------------------------------------------------------------------------------------------------

注意,为了达到最佳的浏览器兼容效果,在实际书写代码的时候,还必须加上各大浏览器的私有前缀

animate.css的使用

animate.css是一个css3动画库,可以到github上去下载,里面预设了很多种常用的动画,可以先在本页看下演示效果,使用也很简单,因为它是把不同的动画绑定到了不同的类里,所以我们想要使用哪种动画的时候,只需要简单的把那个相应的类添加到元素上就行了:

首先在head中引入下载的animate.css文件

然后你想要哪个元素进行动画,就给那个元素添加上animated类 以及特定的动画类名,animated是每个要进行动画的元素都必须要添加的类。

假设使用jquery,要给一个id为demo的元素添加一个摇动的动画,因为摇动的动画类名为shake,所以代码是这样的:

这样载入页面,元素就能动起来了。你也可以在动画完成后,把动画类移除,以便可以再次进行同一个动画。

至于动画的配置参数,比如动画持续时间,动画的执行次数等等,你可以在你的的元素上自行定义,覆盖掉animate.css里面所定义的就行了。

注意这些属性还要记得加上各浏览器的前缀。

总之是很灵活的,说到底不就是一个css文件吗,一看就懂的,你在里面想怎么整就怎么整,不想用它提供的类名,就在里面改掉就行了。如果你只想用里面的部分动画,也可以把那些要使用的动画分离出来,它的官网也提供了这样的功能

下面展示了animate.css里面提供的所有动画,动画名就是类名,你想使用哪个动画,加上这个类名就行了。

参考资料:

Animate.css

CSS3 Animation

http://www.17sucai.com/pins/tag/5664.html

前端CSS&JS动画总结

【前端动画】实现动画的6种方式

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复