CSS3 공통 속성 animation-play-state 사용에 대한 팁
- 高洛峰원래의
- 2017-02-22 13:01:421562검색
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">小火箭</p>
.element { animation: fadeIn 1s, float .5s 1s infinite; } /* 我淡出, 需要1秒；我1秒后开始无限漂浮 */ 여기서 float .5s 1s unlimited여기서 1s는 실행 지연 시간입니다. 무한 플로팅 애니메이션의 두 애니메이션이 완벽하게 협력하여 하나의 애니메이션처럼 느껴집니다. 실제로 모든 CSS3 애니메이션 애니메이션은 동일한 UI 스레드에서 실행되므로 다음을 권장합니다. CSS를 사용하면 애니메이션 효과를 얻을 수 있다.
이 작성 방법은 호환성 문제가 없으며 누구나 즐겁게 사용할 수 있습니다.
2. 标签嵌套与独立动画
我们还可以通过嵌套标签的形式实现连续动画，例如：
<p class="element-wrap"><p class="element">小火箭</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中文网！