CSS3 공통 속성 animation-play-state 사용에 대한 팁

animation-play-state 소개

animation-play-state 속성은 애니메이션이 실행 중인지 일시 중지되었는지 여부를 지정합니다.

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

브라우저 지원:
Internet Explorer 10, Firefox 및 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를 사용하여 한 화면에 해당하는 콘텐츠가 입력될 때 컨테이너에 활성 클래스 이름을 추가하는 것입니다.

container.classList.add("active");

애니메이션 만들기 가격이 높으니 이 콘텐츠 화면을 탐색할 때마다 리플로우를 사용하여 를 다시 실행할 수 있습니다. animation:

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

2. 클래스 이름 활성 및 애니메이션 제어 기술
구체적으로 제어하는 ​​방법 애니메이션 재생? 우리의 첫 번째 반응은 일반적으로 이를 달성하기 위해 다음 방법을 사용하는 것입니다. 애니메이션의 전체 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 animation을 사용하는 모든 요소에는 다음 CSS 코드가 이 클래스 이름으로 추가됩니다. :

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

개인적으로 후자의 방식을 선호하는 이유는 "비침입적"이라는 느낌과 코드레벨이 명확하고 컨트롤이 잘 되기 때문입니다. 관계는 분명합니다. 추후 유지보수 및 확장에 도움이 됩니다.

그러나 IE10/IE11animation-play-state를 사용할 때 주의할 사항이 여전히 있습니다. > 브라우저 , 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을 무시할 수 없습니다. 둘째, 멋진 뒤집기 애니메이션은 모바일 단말기에만 적용되는 것이 아니라 데스크톱 단말기에도 적용 가능합니다. 약간의 노력만 들이면 데스크톱 및 모바일 애플리케이션에 완벽하게 적용할 수 있습니다.

다른 상태의 연속 애니메이션

때때로 애니메이션이 웨이브가 아니라 여러 상태로 나누어지는 경우가 있습니다.

예를 들어, 우리의 작은 로켓은 먼저 애니메이션에서 페이드 아웃된 다음 무한히 위아래로 떠다닙니다. 그것을 달성하는 방법?

핵심은 애니메이션 분해와 지연입니다.

내가 아는 한, 단 하나의

키프레임 키프레임 선언을 사용하여 이 효과를 얻을 수 있는 방법은 없습니다. 애니메이션 상태에 변화가 있기 때문입니다. 한 번 애니메이션과 무한 루프 애니메이션이 실행됩니다.

어떻게 해야 할까요? 애니메이션을 분해하고 2개의

애니메이션 키프레임 애니메이션 키프레임 설명을 작성할 수 있습니다.

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

그런 다음 이러한 키프레임 애니메이션을 개별적으로 적용하세요. 어떻게 적용하나요?

2팁이 ​​있습니다:
1. 쉼표 및 다중 애니메이션 애니메이션 값 ​​은 다음과 같습니다.

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

여기서

float .5s 1s unlimited여기서 1s는 실행 지연 시간입니다. 무한 플로팅 애니메이션의 두 애니메이션이 완벽하게 협력하여 하나의 애니메이션처럼 느껴집니다. 실제로 모든 CSS3 애니메이션 애니메이션은 동일한 UI 스레드에서 실행되므로 다음을 권장합니다. CSS를 사용하면 애니메이션 효과를 얻을 수 있다.

이 작성 ​​방법은 호환성 문제가 없으며 누구나 즐겁게 사용할 수 있습니다.

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中文网！