仅限 Safari 8 CSS 动画问题

Question

我的按钮悬停时有一个 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;
}

有人知道吗？

Answer 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;
}

Answer 2

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

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

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

仅限 Safari 8 CSS 动画问题

Safari 8 Only CSS Animation Issue

css

safari

css-animations