Webkit动画在Chrome中运行良好，但在Safari中无法正常工作。

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

感谢您的帮助。

祝好， Will

- William

Answer 1

当你使用关键帧时，你必须包含至少 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);}
}

- Phil Powell

Answer 2

非常奇怪。在Safari浏览器中，似乎只需在关键帧末尾添加to，动画即可正常工作。

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

希望这有所帮助。

- Chris