Блог

Главная - Вопросы по программированию - Анимация CSS3 отличается в Chrome и других

Анимация CSS3 отличается в Chrome и других

#html #css #google-chrome #animation

#HTML #css #google-chrome #Анимация

Вопрос:

Вот в fiddle пример проблемы, с которой я столкнулся. Эта анимация ведет себя по-разному в разных браузерах. Мне нужно, чтобы все работало как Chrome. Протестировано в Chrome и Firefox.

HTML:

 <div class='wrap'>
  <div class='animate'></div>
</div>

CSS:

 @keyframes test {
  0% {
    left: 0;
    right: inherit;
    width: 0;
  }

  10%{ width: 100%;}

  49%{ width: 100%;}

  59% {
    left: inherit;
    right: 0;
    width: 0;
  }

  100% { width: 0;}
}
@-webkit-keyframes test {
  0% {
    left: 0;
    right: inherit;
    width: 0;
  }

  10%{ width: 100%;}

  49%{width: 100%;}

  59% {
    left: inherit;
    right: 0;
    width: 0;
  }

  100% {width: 0;}
}

.wrap{
  height: 10px;
  position: relative;
  width: 100%;
}

.animate{
  background: #000;
  height: 10px;
  position: absolute;
  top: 0;

  -webkit-animation: test 6s infinite;    
  animation: test 6s infinite;
}

Комментарии:

1. Странно, если вы изначально установите значение right равным 0, оно будет расширяться справа

2. Действительно странное поведение, но вы можете использовать это решение jsfiddle.net/vVGmR/2 — здесь анимировано только одно правило css, и оно работает. Протестировано на IE10, последних версиях Firefox, Opera и Chrome

3. Сработало для меня @VasiliyGorokhov. Пожалуйста, отправьте ответ, который я могу принять как правильный. Спасибо.

4. Обратите внимание, что inherit это недопустимое значение для left и right , что, вероятно, не делает вашей анимации никаких преимуществ.

Ответ №1:

Вы можете использовать это решение jsfiddle.net/vVGmR/2 — здесь анимировано только одно правило css, и оно работает. Протестировано на IE10, последних версиях Firefox, Opera и Chrome

 @keyframes test {
    0% {left: -100%;}
    10% {left: 0;}
    49% {left: 0;}
    59% {left: 100%;}
    99.99% {left: 100%;}
    100% {left: -100%;}
}

@-webkit-keyframes test {
    0% {left: -100%;}
    10% {left: 0;}
    49% {left: 0;}
    59% {left: 100%;}
    99.99% {left: 100%;}
    100% {left: -100%;}
}
.wrap{
    height: 10px;
    position: relative;
    width: 100%;
    overflow: hidden;
}

.animate{
    background: #000;
    height: 10px;
    position: absolute;
    top: 0;
    width: 100%;
    -webkit-animation: test 6s infinite;    
    animation: test 6s infinite;
}