多个关键帧动画在 Safari 中不起作用
Posted
技术标签:
【中文标题】多个关键帧动画在 Safari 中不起作用【英文标题】:Multiple keyframe animations not working in safari 【发布时间】:2016-04-08 12:02:16 【问题描述】:我正在使用具有大量 CSS3 动画的 html5 横幅。为了制作可重复使用的关键帧动画,我在单个元素上使用了多个动画。除了 safari,它运行良好。
CSS:
.text1
-webkit-animation: fadeOutRight 1s 3s forwards;
animation: fadeOutRight 1s 3s forwards;
.text2
-webkit-animation: fadeInLeft 1s 4s both, fadeOutRight 1s 7s forwards;
animation: fadeInLeft 1s 4s both, fadeOutRight 1s 7s forwards;
.text3
-webkit-animation: fadeInLeft 1s 8s both;
animation: fadeInLeft 1s 8s both;
/* fadeInLeft */
@-webkit-keyframes fadeInLeft
0% -webkit-transform: translateX(-100px); opacity: 0;
100% -webkit-transform: translateX(0px); opacity: 1;
@keyframes fadeInLeft
0% transform: translateX(-100px); opacity: 0;
100% transform: translateX(0px); opacity: 1;
/* fadeOutRight */
@-webkit-keyframes fadeOutRight
0% -webkit-transform: translateX(0px); opacity: 1;
100% -webkit-transform: translateX(100px); opacity: 0;
@keyframes fadeOutRight
0% transform: translateX(0px); opacity: 1;
100% transform: translateX(100px); opacity: 0;
jsfiddle link
可行的解决方案:
-
用另一个/更多元素包裹元素并向每个元素添加单个动画。此解决方案需要额外的包装元素样式。
将多个动画合并为一个,此解决方案增加了
keyframes rule
的复杂性,并且对于复杂的动画来说不容易维护。
根据另一个*** post 接受的回答——
You cannot animate same attribute more than once, on a same element, the last one will overwrite other
。
在我的情况下,这只适用于 safari 并且第一个动画只运行不
第二个。如果我不在多个动画上为相同的属性设置动画
那么它也适合 safari(jsfiddle)。这个不是
适合我,因为我需要为相同的属性设置动画
多个动画。
注意:
虽然我在同一个元素上使用了多个动画,但我没有同时制作动画,但每个动画之间存在延迟。
问题:
无论动画属性如何,是否可以在同一个元素上使用多个 CSS3 动画?
【问题讨论】:
您找到解决方案了吗?我在这个问题上苦苦挣扎。我有超过 2 个关键帧动画。显然,Safari 想要反转动画。我试过了,但在反转之后似乎只有前两个动画可以正常工作。 【参考方案1】:出于某种原因,Safari 不会通过简写方式来描述动画,例如:
animation: test 1s 2s 3 alternate backwards
需要对其单独列出的属性进行更详细的描述:
.class
animation-name: bounce;
animation-duration: 4s;
animation-iteration-count: 10;
animation-direction: alternate;
animation-timing-function: ease-out;
animation-fill-mode: forwards;
animation-delay: 2s;
【讨论】:
以上是关于多个关键帧动画在 Safari 中不起作用的主要内容,如果未能解决你的问题,请参考以下文章
动画/关键帧在 Firefox 中不起作用(通过 JavaScript 启动 CSS 动画)