Question

我试图制造脉冲。至今,它在幼.园进行罚款,但是在Sato,它没有做任何事情。

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

If you want to see a demo of what I m doing, you can view it here: http://www.thestoicsband.com/

the login details are: username: guest, password: guest123

Thanks for your help.

Cheers Will

Answer 1

当您重新使用关键参数时,您必须包括<>至少<>>>>>>><0> 代码>和<>>>100%/代码> 关键参数。因此,你可以简单地修改贵国的社会保障局,以解决这个问题:

@-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 and 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

Very strange. It seems if you add to at the end of the keyframes the animation works in 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);
   }
}

希望这一帮助。

友情链接