анимация-состояние-пауза не работает, т.е. - PullRequest
Новая
       15

анимация-состояние-пауза не работает, т.е.

0 голосов
/ 31 августа 2018

Я столкнулся с ошибкой ie-edge при использовании CSS-анимации.

HTML: 

<div class="teaser-large image-loaded>
   <img src="level3Brand-1.jpg" />
</div>

CSS3: 

teaser-large {
   opacity: 0;
   animation: fadeLeft 700ms ease-in-out;
   animation-fill-mode: forwards;
}
image-loaded {
   -webkit-animation-play-state: paused;
   animation-play-state: paused; 
}

Любая помощь будет оценена!

Ответы [ 2 ]

0 голосов
/ 31 августа 2018

Вы забыли . в определении имени .class в CSS. Также обратите внимание, что для работы некоторых браузеров требуются префиксы для свойств CSS: https://developer.mozilla.org/en-US/docs/Web/CSS/animation#Browser_compatibility

.teaser-large {
  opacity: 0;
  -webkit-animation: fadeLeft 700ms ease-in-out;
  -moz-animation: fadeLeft 700ms ease-in-out;
  -o-animation: fadeLeft 700ms ease-in-out;
  animation: fadeLeft 700ms ease-in-out;
  
  -webkit-animation-fill-mode: forwards;
  -moz-animation-fill-mode: forwards;
  -o-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}

.image-loaded {
  -webkit-animation-play-state: paused;
  -moz-animation-fill-mode: paused;
  -o-animation-fill-mode: paused;
  animation-play-state: paused; 
}
<div class="teaser-large image-loaded">
  <img src="https://cdn.pixabay.com/photo/2018/08/19/10/16/nature-3616194_960_720.jpg" />
</div>
0 голосов
/ 31 августа 2018 
teaser-large {
   opacity: 0;
   animation: fadeLeft 700ms ease-in-out;
   animation-fill-mode: forwards;
   -webkit-animation: fadeLeft 700ms ease-in-out;
   -webkit-animation-fill-mode: forwards;
}

Опера: -o-animation ... Firefox: -moz-animation ...

...