Webkit 动画在 chrome 中运行良好，但在 safari 中却不行答案

【问题标题】：Webkit animation works fine in chrome, but not in safariWebkit 动画在 chrome 中运行良好，但在 safari 中却不行
【发布时间】：2011-01-26 12:56:53
【问题描述】：

我试图创建一个脉冲动画。到目前为止，它在 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

感谢您的帮助。

干杯会

【问题讨论】：

标签： google-chrome safari webkit css

【解决方案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);}
}

【讨论】：

【解决方案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);
   }
}

希望这会有所帮助。

【讨论】：