css - CSS 动画在 Chrome 中而不是在 Safari 中工作

Question

当绝对位置用css3动画改变位置时，我想要一个div。该技巧适用于 Chomre (webkit)，但不适用于 iDevices 的 Safari。

在 Safari 中，它执行了以下操作： 缓慢出现 突然改变位置（在 chrome 中平滑） 缓慢消失

可以是什么？谢谢指教

@-webkit-keyframes myfirst /* Safari and Chrome */
{
0%   {opacity: 0; bottom: 2px; right: 5%;}
25%  {opacity: 1; bottom: 2px; right: 5%;}
75%  {opacity: 1; bottom: 40%; right: 5%;}
100% {opacity: 0; bottom: 40%; right: 5%;}
}

我试过 0%=from 和 100%=to 并得到相同的行为

编辑-> 已解决 * *Safari 不要让我做底部：2px；对：5%；到底部：40%；对：5%；* *所有值必须是相同的类型、百分比或 px * *这将起作用：

@-webkit-keyframes myfirst /* Safari and Chrome */
{
0%   {opacity: 0; bottom: 1%; right: 5%;}
25%  {opacity: 1; bottom: 1%; right: 5%;}
75%  {opacity: 1; bottom: 40%; right: 5%;}
100% {opacity: 0; bottom: 40%; right: 5%;}
}

Answer 1

@-webkit-keyframes myfirst /* Safari and Chrome */
{
0%   {opacity: 0; bottom: 1%; right: 5%;}
25%  {opacity: 1; bottom: 1%; right: 5%;}
75%  {opacity: 1; bottom: 40%; right: 5%;}
100% {opacity: 0; bottom: 40%; right: 5%;}
}