Webkit animation works fine in chromes, but not in safari

Question

I am trying to create impulse animation. While it works fine in chrome, but in Safari it does nothing.

#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 watch it here: http://www.thestoicsband.com/

login details: username: guest, password: guest123

Thank you for your help.

Cheers will

Answer 1

When you are using keyframes, you must include at least 0%, and 100%keyframes. Therefore, you can fix this problem by simply changing your CSS as follows:

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

, .