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

Question

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

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

可以是什么？谢谢指教

@-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%;}
}