Question

我试图创建一个脉冲动画。到目前为止，它在chrome中运行良好，但在Safari中它没有做任何事情。

#cogFlower:hover
{   
    -webkit-animation-name: pulse;
    -webkit-animation-duration: 3s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: ease-in-out;
}

@-webkit-keyframes pulse {
   0%   { -webkit-transform:rotate(0deg);}
   25%  { -webkit-transform:rotate(90deg);}
   50%  { -webkit-transform:rotate(180deg);}
   75%  { -webkit-transform:rotate(270deg);}
  }

如果您想查看我正在做的演示，您可以在此处查看： http://www.thestoicsband.com/

登录详细信息如下：用户名：guest，密码：guest123

感谢您的帮助。

干杯

Answer 1

当您使用关键帧时，您必须至少包含 <{em> 0%和100%个关键帧。所以你可以通过简单地修改你的CSS来解决这个问题：

@-webkit-keyframes pulse { 0% { -webkit-transform:rotate(0deg);} 25% { -webkit-transform:rotate(90deg);} 50% { -webkit-transform:rotate(180deg);} 75% { -webkit-transform:rotate(270deg);} 100% { -webkit-transform:rotate(270deg);} }

或者，可以使用from和to关键字代替开始和结束百分比：

@-webkit-keyframes pulse { from { -webkit-transform:rotate(0deg);} 25% { -webkit-transform:rotate(90deg);} 50% { -webkit-transform:rotate(180deg);} 75% { -webkit-transform:rotate(270deg);} to { -webkit-transform:rotate(270deg);} }

Answer 2

很奇怪。看起来如果你在关键帧的末尾添加to，动画可以在Safari中使用。

@-webkit-keyframes pulse {
   0% { 
       -webkit-transform: rotate(0deg);
   }
   25% { 
       -webkit-transform: rotate(90deg);
   }
   50% {
       -webkit-transform: rotate(180deg);
   }
   75% {
       -webkit-transform: rotate(270deg);
   }
   to {
       -webkit-transform: rotate(360deg);
   }
}

希望这有帮助。

Webkit动画在chrome中运行良好，但在safari中运行不正常

2 个答案: