Safari 8 仅 CSS 动画问题答案

【问题标题】：Safari 8 Only CSS Animation IssueSafari 8 仅 CSS 动画问题
【发布时间】：2015-11-02 02:44:31
【问题描述】：

我的按钮在悬停时启动了一个 CSS 动画，这些动画在除 safari 8 之外的所有浏览器中都能正常工作，但我无法弄清楚。

我使用的是自动供应商前缀，所以这里没有前缀。

在我升级到 Safari 8 之前，动画效果一直很好

/* HOVER EFFECTS */
@keyframes push {
0% {transform: scale(1)}
50% {transform: scale(0.95)}
100% {transform: scale(1)}
}

.push {
display: inline-block;
transform: translateZ(0);
-webkit-font-smoothing:subpixel-antialiased
}
.push:hover, .push:focus, .push:active {
animation-name: push;
animation-duration: 0.3s;
animation-timing-function: linear;
animation-iteration-count: 1;
}

有人知道吗？

【问题讨论】：

标签： css safari css-animations

【解决方案1】：

你在使用女巫自动前缀吗？使用正确的供应商前缀为我工作的代码和平。我使用的是 Safary 版本 8.0.4 (10600.4.10.7)

这里是我的提示：

@-webkit-keyframes push {
    0 % {
        -webkit-transform: scale(1)
    }
    50 % {
        -webkit-transform: scale(0.95)
    }
    100 % {
        -webkit-transform: scale(1)
    }
}
.push {
    display: inline-block;
    -webkit-transform: translateZ(0);
    -webkit-font-smoothing: subpixel-antialiased;
}
.push: hover, .push: focus, .push: active {
    -webkit-animation-name: push;
    -webkit-animation-duration: 0.3 s; 
    -webkit-animation-timing-function: linear; 
    -webkit-animation-iteratio-count: 1;
}

【讨论】：

leaverou.github.io/prefixfree。我将尝试手动添加 webkit 的东西，看看会发生什么
仍然不起作用：.push:hover, .push:focus, .push:active { animation-name: push; -webkit-动画名称：推送；动画持续时间：0.3s； -webkit 动画持续时间：0.3 秒；动画定时功能：线性； -webkit-animation-timing-function：线性；动画迭代计数：1； -webkit 动画迭代计数：1； }
试试我的：@-webkit-keyframes push { 0% {-webkit-transform: scale(1)} 50% {-webkit-transform: scale(0.95)} 100% {-webkit -transform: scale(1)} } .push { display: inline-block; -webkit-transform: translateZ(0); -webkit-font-smoothing:subpixel-antialiased } .push:hover, .push:focus, .push:active { -webkit-animation-name: push; -webkit 动画持续时间：0.3 秒； -webkit-animation-timing-function：线性； -webkit 动画迭代计数：1； }
您能否编辑答案以合并来自 cmets 的信息？

【解决方案2】：

是的。（不适用于 iOS 8.1） - iOS Safari 不能很好地处理动画延迟。此外，不能保证动画将在其给定值之后完全开始。

因此，请避免使用 animation-duration / animation-delay，而是为每个 element 设置自定义关键帧，（尽管这可能看起来已经过时）它可以工作。

完整地写出每个动画（而不是分开animation-name， animation-duration 等），因为在可用的 polyfill 下，Safari 无法正确识别这些特定属性，并将它们视为 -webkit-animation，并覆盖其他动画规则！

【讨论】：