Question

使用CSS动画时，我在ie-edge上遇到了一个错误。

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

任何帮助将不胜感激！

Answer 1

您忘记了CSS中.名称定义中的.class。另请注意，某些浏览器需要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>

Answer 2

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 ...

动画播放状态暂停不起作用，即

2 个答案: