Tipps zur Verwendung des allgemeinen CSS3-Attributs „animation-play-state'.

Einführung in den Animation-Play-State

Das Attribut „Animation-Play-State“ gibt an, ob die Animation ausgeführt oder angehalten wird.

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

Browserunterstützung:
Internet Explorer 10, Firefox und Opera unterstützen das animation-play-state-Attribut .
Safari und Chrome unterstützen alternative -webkit-animation-play-state-Attribute.
Hinweis: Internet Explorer 9 und früher unterstützen die Eigenschaft „animation-play-state“ nicht.

Syntax: animation-play-state: paused|running;
paused gibt an, dass die Animation angehalten wurde.
running gibt an, dass die Animation abgespielt wird.

Im Folgenden werden die Verwendungsfähigkeiten von Animation-Play-State erläutert.
Hinweis: Die privaten Präfixe der Beispielcodes werden weggelassen, bitte entscheiden Sie selbst

Verwenden Sie „animation-play-state“, um die Animationswiedergabe auf jedem Bildschirm zu steuern

1. Klassenname aktiv und Animationsauslöser
Erstens ist die Verwendung von aktiv zum Auslösen von Animationen auf jedem Bildschirm fast zur gängigen Praxis geworden und sollte auch zur Standardindustrienorm werden .
Der allgemeine Ansatz besteht darin, JS zu verwenden, um den Klassennamen aktiv hinzuzufügen:

container.classList.add("active");

Wenn Sie dies tun, ist die Animation sehr hochwertig Ich hoffe, dass die Animation jedes Mal, wenn ich den Inhalt dieses Bildschirms durchsuche, ihn erneut durchläuft. Sie können Reflow verwenden, um die Animation erneut auszulösen :

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

2. Techniken zur aktiven Klassennamen- und Animationssteuerung
So steuern Sie die Wiedergabe von Animationen? Unsere erste Reaktion besteht normalerweise darin, die folgende Methode zu verwenden, um dies zu erreichen. Der vollständige CSS-Code der Animation wird im aktiven angezeigt Zustand, wie zum Beispiel:

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

In Bezug auf Implementierung und Funktion ist die obige Methode sehr gut, leicht zu verstehen und es sind nicht leicht Fehler zu machen. Ich persönlich bevorzuge jedoch die Verwendung des Attributs animation-play-state mit CSS3, um jede Bildschirmanimation zu steuern. Die Implementierung ist wie folgt:

Animationsbezogen CSS Der Code wird direkt auf das Element geschrieben:

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

Erstellen Sie einen Klassennamen, z. B. .animate, alle Elemente, die Animation-Animation verwenden, fügen diesen Klassennamen wie folgt hinzu: CSS Code:

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

Der Grund, warum ich persönlich die letztere Methode bevorzuge, ist, dass sie ein „nicht aufdringliches“ Gefühl vermittelt und die Codeebene klar ist. und die Kontrollbeziehung ist klar. Förderlich für spätere Wartung und Erweiterung.

Bei der Verwendung von animation-play-state für IE10/IE11 Browser, animation-play-state kann nicht abgekürzt werden. Beispiel:

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

führt nur dazu, dass die gesamte

CSS-Anweisung hängen bleibt! Die folgende Schreibmethode wird unterstützt:

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

Einige Leute fragen sich vielleicht, warum der

IE-Browser plötzlich funktioniert in den Browser eingebrochen? Erstens können wir die Mainstream-Mobiltelefone Windows Phone nicht ignorieren. Zweitens ist die schöne Flip-Animation nicht nur auf mobile Endgeräte beschränkt, sondern auch auf Desktop-Terminals anwendbar. Mit ein wenig Aufwand lässt es sich vollständig an Desktop- und mobile Anwendungen anpassen, warum nicht!

Kontinuierliche Animation in verschiedenen Zuständen

Manchmal ist die Animation möglicherweise keine Welle, sondern in Zustände unterteilt.

Zum Beispiel verschwindet unsere kleine Rakete zunächst aus der Animation und schwebt dann unendlich auf und ab. Wie erreicht man es?

Der entscheidende Punkt ist die Zerlegung und Verzögerung der Animation.

Soweit ich weiß, gibt es keine Möglichkeit, diesen Effekt mit nur einer

Keyframes Keyframe-Deklaration zu erzielen, da es Änderungen im Animationsstatus gibt: einer ist nur einer Einmal ausgeführte Animation und eine Endlosschleifenanimation.

Was tun? Wir können die Animation aufschlüsseln und zwei

Animations-KeyframesAnimations-Keyframe-Beschreibungen schreiben.

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

Anschließend wenden Sie diese Keyframe-Animationen einzeln an. Wie wendet man es an? Es gibt

2 Tipps:
1. Komma- und Multi-Animations-Animationswerte sind wie folgt:

p class="element">小火箭
 
.element { animation: fadeIn 1s, float .5s 1s infinite; }  /* 我淡出, 需要1秒；我1秒后开始无限漂浮 */

wobei

float .5s 1s unendlichwobei 1s das Unendliche ist Verzögerungszeit für die Ausführung schwebender Animationen, sodass die beiden Animationen perfekt zusammenarbeiten und sich wie eine Animation anfühlen. Tatsächlich handelt es sich um eine Animation. Alle CSS3-Animationen-Animationen laufen auf demselben UI-Thread, weshalb dies empfohlen wird Verwenden Sie CSSDer Grund, warum Animationseffekte erzielt werden.

Diese Schreibmethode weist keine Kompatibilitätsprobleme auf und jeder kann sie problemlos verwenden.

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

<p></p><p>小火箭</p>
 
.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;
}

更多css3常用属性animation-play-state的使用技巧 相关文章请关注PHP中文网！