我在使用 Safari 创建模拟气泡漂浮在空中的效果时遇到了问题,但羽毛除外。我省略了一些代码来了解事情的要点。正在进行的工作的 url 是 here .
这是我的动画对象的 webkit 样式。
@-webkit-keyframes f1 {
100% {
-webkit-transform: translateX(-25px) translateY(-350px);
}
}
.feather {
/* other styling omitted */
-webkit-animation-duration: 7s;
-webkit-animation-timing-function: linear;
}
和创建一堆对象的 javascript。
animateFeathers = function() {
var $feather = $('<img>'),
$feather.addClass('feather animated');
$feather.attr('src','img/feather.png');
$feather.css('-webkit-animation-name','f1');
$featherContainer.append($feather);
setTimeout(function() {
$feather.remove();
}, 9000);
// random time to create next feather
var rTimeout = Math.random() * maxTime + minTime;
setTimeout(animateFeathers, rTimeout);
}
如果您访问 link在 Chrome 或 Firefox 中你会看到预期的效果。然而,在 Safari(同样是移动设备或桌面设备)中,羽毛堆叠在一起并且每 7 秒仅在一组中动画。我希望它们在插入 DOM 后立即开始动画。对此有什么想法吗?
最佳答案
不得不求助于使用 Canvas ,因为我真的无法在 Safari 上获得性能。花了好几个小时,但它的工作:
关于css - Safari(手机+桌面)分组CSS关键帧动画,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15505456/