Анимация Webkit отлично работает в Chrome, но не в Safari. - PullRequest
Новая
       13

Анимация Webkit отлично работает в Chrome, но не в Safari.

3 голосов
/ 26 января 2011

Я пытаюсь создать импульсную анимацию.Пока что он отлично работает в 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/

данные для входа: имя пользователя: гость, пароль: guest123

Спасибо за вашу помощь.

Приветствия Will

Ответы [ 2 ]

3 голосов
/ 26 января 2011

Когда вы используете ключевые кадры, вы должны включать как минимум 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 голосов
/ 26 января 2011

Очень странно.Кажется, если вы добавите 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);
   }
}

Надеюсь, это поможет.

...