css3常用属性animation-play-state的使用技巧

animation-play-state 属性规定动画正在运行还是暂停。

div
{
animation-play-state:paused;
-webkit-animation-play-state:paused; /* Safari 和 Chrome */
}

浏览器支持:
Internet Explorer 10Firefox 以及 Opera 支持 animation-play-state 属性。
Safari 和 Chrome 支持替代的 -webkit-animation-play-state 属性。
注释:Internet Explorer 9 以及更早的版本不支持 animation-play-state 属性。

语法:animation-play-state: paused|running;
paused 规定动画已暂停。
running 规定动画正在播放。

下面讲解一下animation-play-state的使用技巧。
注:示例代码的私有前缀均省略,大家自行脑补

使用animation-play-state控制每屏动画播放

1. 类名active与动画触发
首先,使用active触发每一屏的动画,几乎已经约定俗成,应该也建议成为默认的行业规范。
一般做法是,当对应一屏内容进入的时候,使用JS给容器添加类名active:

container.classList.add("active");

如果你做的动画逼格较高,希望每次浏览这一屏内容的时候,动画都走一遍,可以使用reflow重新触发一下animation:

container.classList.remove("active");
container.offsetWidth = container.offsetWidth;
container.classList.add("active");

2. 类名active与动画控制技巧
如何具体控制动画的播放呢?我们通常第一反应是使用下面的方法实现,动画的完整CSS代码在active状态下呈现,如:

.element1 { /* 尺寸与定位 */ }
.element2 { /* 尺寸与定位 */ }
.element3 { /* 尺寸与定位 */ }
...

.active .element1 { animate: name1 1s; }
.active .element2 { animate: name2 1s; }
.active .element3 { animate: name2 1s; }
...

从实现和功能上将,上面方法是很不错的,通俗易懂,不易犯错。不过我个人更喜欢使用配合CSS3的animation-play-state属性对每屏动画进行控制,实现如下:

动画相关CSS代码直接写在元素上:

.element1 { /* 尺寸与定位 */ animate: name1 1s; }
.element2 { /* 尺寸与定位 */ animate: name2 1s; }
.element3 { /* 尺寸与定位 */ animate: name3 1s; }
...

创建一个类名,如.animate,凡是使用到了animation动画的元素都添加这个类名;如下CSS代码:

.animate {
    animation-play-state: paused;
}
.active .animate {
    animation-play-state: running;
}

之所以个人更喜欢后面的方法,是因为有一种“无侵入”的感觉,代码层次清晰,控制关系明确。有利于后期的维护与扩展。

然而,使用animation-play-state还是有些需要注意的,对于IE10/IE11浏览器,animation-play-state是不能简写的。如:

.element { animate: shake 4s 2s both infinite paused; }

只会让整个CSS声明挂掉的!如下写法支持:

.element {
    animate: shake 4s 2s both infinite;
    animation-play-state: paused;
}

有人可能要奇怪了,怎么突然IE浏览器乱入了?首先,我们不能无视主流手机之Windows Phone. 其次,帅气的翻屏动画并不是移动端专有,桌面端也适用。稍稍用力,桌面移动全适配,何乐而不为!

不同状态下的连续动画

有时候,动画可能不是一波流,分状态。
例如,我们的小火箭,先是淡出动画,然后无限上下悬浮。怎么实现呢?

关键点就是动画分解与延时。

据我所知,没办法只使用一个keyframes关键帧声明就实现这个效果,因为,这里有动画状态的变化:一个只执行一次的动画和一个无限循环动画。

怎么办?我们可以将动画分解,写2个animation keyframes动画关键帧描述。

@keyframes fadeIn { /* ... */ }
@keyframes float { /* ... */ }

然后,再分别应用这些关键帧动画。如何应用呢?有2个小技巧:
1. 逗号与多animation动画值
如下:

div class="element">小火箭</div>

.element { animation: fadeIn 1s, float .5s 1s infinite; }  /* 我淡出, 需要1秒;我1秒后开始无限漂浮 */

其中float .5s 1s infinite这里的1s就是无限漂浮动画执行延迟的时间,于是,两个动画完美配合,感觉就像是一个动画。实际上,就是一个动画,所有CSS3 animation动画走同一个UI线程,这也是为何推荐使用CSS实现动画效果的原因。

此写法没有兼容性问题,大家可以开开心心地使用。

2. 标签嵌套与独立动画
我们还可以通过嵌套标签的形式实现连续动画,例如:

<div class="element-wrap"><div class="element">小火箭</div></div>

.element-wrap { animation: fadeIn 1s; }          /* 我淡出, 需要1秒 */
.element { animation: float .5s 1s infinite; }   /* 我1秒后开始无限漂浮 */

有人可能会奇怪了。animation本身就支持多动画并行,你还搞个标签嵌套,没有任何使用的理由啊!没错,单纯看我们这个例子,确实是这样。但是:

① 提取公用动画
这类多屏动画是有N多元素同时执行不同的动画。比方说,火箭是淡出,然后上下漂浮;火箭的火焰是淡出,然后大小变化;黑洞是淡出,然后左右随波。你如何实现?

如果纯粹借助animation语法,应该是:

.element1 { animation: fadeIn 1s, float .5s 1s infinite; }  /* 我淡出, 需要1秒;我1秒后开始无限漂浮 */
.element2 { animation: fadeIn 1s, size .5s 1s infinite; }   /* 我淡出, 需要1秒;我1秒后开始大小变化 */
.element3 { animation: fadeIn 1s, move .5s 1s infinite; }   /* 我淡出, 需要1秒;我1秒后开始左右移动 */

可以看到,淡出是公用的动画效果,我们可以借助嵌套标签,实现公用语法的合并,方面后期维护:

.element-wrap { animation: fadeIn 1s; }          /* 大家都1秒淡出 */
.element1 { animation: float .5s 1s infinite; }  /* 我1秒后无限漂浮 */
.element2 { animation: size .5s 1s infinite; }   /* 我1秒后忽大忽小 */
.element3 { animation: move .5s 1s infinite; }   /* 我1秒后左右移动 */

②避免变换冲突
有个元素动画是边360度旋转、边放大(从0放大到100%),像这种具有典型特征的动画我们显然要独立提取与公用的:

@keyframes spin { /* transform: rotate... */ }
@keyframes zoomIn { /* transform: scale... */ }

好了,现在问题来了,变放大边旋转:

.element { animation: spin 1s, zoomIn 1s; }  /* 旋转:啊,完蛋啦,我被放大覆盖啦! */

由于都是使用transform, 发生了残忍的覆盖。当然,有好事的人会说,你使用zoom不就好了!确实,如果只是移动端,使用zoom确实棒棒哒!但是,我们这个企业活动,PC是主战场,因此,FireFox浏览器(FF不识zoom)是不能无视的。

怎么办?重新建一个名为spinZoomIn的动画关键帧描述还是?

对啊,你直接外面套一层标签不就万事大吉了

.element-wrap { animation: spin 1s; }   /* 我转转转 */
.element { animation: zoomIn 1s; }      /* 我大大大 */

无侵入定位和居中定位准则

1. 这里的“无侵入定位”指不受animation影响的元素定位,包含两部分:一是不使用keyframes关键帧决定初始位置;二是不要使用keyframes中出现的属性定位。

①. 不使用keyframes决定初始位置
应该都知道,CSS3 animation的fill-mode可以决定元素动画结束前后的位置,也就是也具有定位的作用。此时,可能就会有小伙伴,故作聪明,利用animation keyframes 0% {}或form {}去做定位,貌似,还省了写代码。看上去很赞,实际上狭隘了,这对于对animation支持不佳或不支持的浏览器实际上是不友好的,例如Android2.3不支持animation-fill-mode, IE6-IE9不支持CSS3 animation,于是乎,当遭遇这些浏览器的时候,页面动画元素的布局实际上是毁掉的。所以,这些动画元素定位的时候,需要使用“无侵入定位”,也就是,就算页面没有animation, 我也是个“标致人儿”。

②. 不使用keyframes中出现的属性定位
举个例子,有个球,正好定位在模块的中心,同时有个无限旋转效果。使用transform: translate(-50%,-50%)居中定位再合适不过了,不用我心里难受,于是,使用了transform定位。此时,冲突发生,旋转动画也是需要transform变换的。

@keyframes spin {
    0% { transform: rotate(0); }
    100% { transform: rotate(360deg); }
}

要么使用业界约定俗成spin覆盖,要么另起炉灶没法重用:

@keyframes spin-trans {
    0% { transform: rotate(0) translate(-50%,-50%); }
    100% { transform: rotate(360deg) translate(-50%,-50%); }
}

显然,都是不合适的。建议使用传统left/top/margin进行定位,与transform变换动画“无侵入”。

2. 这里的“居中定位准则”包含两部分:一是元素定位在容器中间位置;二是元素的定位方式为居中定位。

①. 元素定位在容器中间
容器以及容器内的动画元素可以看成是一个动画模块,为了这个模块可以轻松驾驭水平布局和垂直局部,里面的动画元素形成的整体一定要在容器的中间,不要被设计稿或周围环境影响。

②. 定位方式为居中定位
所谓“居中定位”是相对“传统定位”而言的。Web页面中的模块、文字什么的默认都是相对于左上角堆砌的,所以,很自然地,我们在重构页面,做布局,写交互效果的时候,也都是相对左上角定位。活用元素本身的定位特性,这是很赞的也推荐这么做!但是,如果你和多元素CSS动画打交道,可能就需要改变下惯性思维了,很重要的一点就是“从以左上角为参考点变成以中心点为参考点”
我们在实现多元素动画效果时候,会出现两类角色:一是容器;二是容器里面诸多动画元素。

其中,对于容器元素,尤其在做移动端产品时候,我们很自然会让其居中定位:

.container {
    position: absolute; left: 50%; top: 50%;
    transform: translate3d(-50%, -50%, 0);
}

左上角定位(或右上角定位):

.example {
    position: absolute; left: 100px; top: 100px;
}

中心点定位+ margin偏移:

.example {
    position: absolute; left: 50%; top: 50%;
    margin-left: -100px; margin-top: -100px;
}
时间: 2024-08-08 08:22:41

css3常用属性animation-play-state的使用技巧的相关文章

CSS3动画属性animation的用法

转载: 赞生博客 高端订制web开发工作组 » CSS3动画属性animation的用法 CSS3提供了一个令人心动的动画属性:animation,尽管利用animation做出来的动画没有flash或者javascript做出的动画流畅绚丽,但是从代码量和开发时间上提供了便利. animation基本语法是: animation:name keeping-time animate-function delay times iteration final; 第一个参数:name: 动画的名字,即

css3常用属性

CSS3 动画属性(Animation) @keyframes //规定动画. animation //所有动画属性的简写属性,除了 animation-play-state 属性. animation-name //规定 @keyframes 动画的名称. animation-duration //规定动画完成一个周期所花费的秒或毫秒. animation-timing-function //规定动画的速度曲线. animation-delay //规定动画何时开始. animation-it

CSS3 常用属性(一)-- 边框、背景

现今,界面极大的丰富,传统的 HTML+CSS 已经跟不上时代的步伐,在 CSS3 中,有太多非常好用的属性,可以很方便的做出种种炫酷的效果,接下来,我将例举一些常用的 CSS3 的属性. border-radius:圆角. border-radius : 50px ; /*四个角的圆角均为50px*/ border-radius : 50px 100px; /*左上右下的圆角是50px,左下右上的圆角是100px*/ border-radius : 10px 20px 30px 40px; /

CSS3 常用属性(三)-- 用户界面、文字、两种盒模型

用户界面--column 关于用户界面,我们先了解一下在块元素中写文字时,浏览器中的呈现情况,这个其实很明显,所有的文本内容会在块元素内从左到右一个个字排列,排满后,从上到下一排排渲染--然而,有些时候,页面需求的呈现方式是,类似于报纸似得,将一段文本内容,分成多列布局显示. 用户界面使用的示例如下: .font{ width:300px; height:300px; border:1px solid #000; margin:0px auto; column-count:3; /* 定义数量

css3常用属性之表现型

本文来源:www.liteng.org如需转载请注明出处.否则将追究法律责任 版权归作者和博客园所有,请友情转载. css3的使用已经分布在各种网站上,其用途对于前端开发人员来说有很大的帮助,比如之前的圆角矩形,需要使用背景图片来完成,现在只需使用border-radius:5px;便可以做出圆角边框的效果,今天来记录下css3一些常用的属性. 盒子属性:边框圆角:radius,边框阴影:box-shadow 边框:border-radius:top-left top-right bottom-

基于CSS3新属性Animation及transform实现类似翻书效果

注:本实例JS部分均以原生JS编写,不善用原生JS的,可用jQuery等对三方框架改写 先上效果图:(样式有点丑,可以忽略一下下,效果出来了就好,后期加到其他项目中方便更改0.0) 类似翻书效果,原本的意思是使用JS来控制的,点击一次之后使用setInterval去控制书页翻过去的动画,当书页翻转180°之后,清除掉setInterval,但当我连续点击,那之前没有翻转180°的书页将无法继续完成之前的动作,可以用清除setInterval的方式,但总感觉动画效果不好,当然还有其他解决办法,但突

CSS3 常用属性(四)-- 过渡、动画

过渡--transition 过渡这个属性的作用是当元素的样式发生变化时,使用动画的效果进行变化.有了过渡属性后,很多情况下,写一些简单效果,将不需要再借助 javascript 去计算. transition  过渡属性简写,可以设置四个值 transition-property 过渡的CSS的名字,或是all transition-duration  从一个状态到另一个状态的的时间 transition-timing-function 过渡效果的动画曲线,默认easy,linear是匀速,c

CSS3动画属性animation

animation 属性是一个简写属性,用于设置六个动画属性: 1 animation-name 2 animation-duration 3 animation-timing-function 4 animation-delay 5 animation-iteration-count 6 animation-direction 例子如下 div { animation:mymove 5s infinite; -webkit-animation:mymove 5s infinite; /* Sa

css3动画属性-animation

一:动画属性参数的详解 简介 CSS动画(Animations)简单说就是在一段固定的动画时间内暗中在某一频率内改变其CSS某个或某些值,从而达到视觉上的转换动画效果.Animations的很多方面都是可以控制的,包括动画运行时间,开始值和结束值,还有动画的暂停和延迟其开始时间等. 语法 <' animation-name '>:检索或设置对象所应用的动画名称 <' animation-duration '>:检索或设置对象动画的持续时间 <' animation-timin