Почему CSS3-анимации ведут себя странно при использовании в сочетании с переходами CSS3? - PullRequest
Новая
       11

Почему CSS3-анимации ведут себя странно при использовании в сочетании с переходами CSS3?

0 голосов
/ 02 сентября 2011

См. эту скрипку для примера того, что я имею в виду, или просмотрите этот код. 

<a href="/">test</a>

a{
    background-color:#ccc;
    transition: all 1s ease;
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
    -webkit-transition: all 1s ease;
}
a:hover{
    background-color:#888;
}

a{
    -moz-animation-duration: 3s;  
    -moz-animation-name: move;  
    -moz-animation-iteration-count: infinite;  
    -moz-animation-direction: alternate;  
}

@-moz-keyframes move {  
    from {  
      margin-left: 0px;
    }  

    to {  
      margin-left: 50px;
    }  
  }

Анимация иногда скачет или изменяет скорость, особенно когда вы наводите на нее курсор ... Я попытался запустить анимацию самостоятельно (без определенного перехода), и она работает плавно и, как и ожидалось. Я запустил переход самостоятельно, и он работает, как и ожидалось. Комбинация, кажется, вызывает проблему.

Может ли быть ошибка реализации Firefox? Я использую Firefox 6.0.1, Ubuntu 11.04.

1 Ответ

2 голосов
/ 02 сентября 2011

Вам нужно заменить «все» на «фон». Тогда все работает нормально. Я думаю, что при наведении курсора все переходы будут перенесены, так что и current-margin-left на новый margin-left, то же самое, поэтому поле не изменяется в течение всего периода перехода. После этого анимация снова имеет приоритет, и вы видите прыжок.

...