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 Only CSS动画问题

2 个答案: