使用关键帧 CSS 创建无限动画

Question

我有一个样本：

关联

代码 HTML：

<img src="https://i1.wp.com/img.celmaitare.net/wp-content/uploads/2014/12/Poze-Peisaje-179.jpg" class="img">

代码CSS：

@keyframes fade-img {
    0%{
        opacity: 0;
    }
    100%{
        opacity: 0.5;
        filter: alpha(opacity=50);
        -moz-transition: all 0.9s ease;
        -webkit-transition: all 0.9s ease;
    }
}

.img{
  animation-name: fade-bg;
    animation-iteration-count: infinite;
    animation-duration: 2s;
}

我想在 2 秒后重复这个动画，但它不明白为什么它不起作用。

你能告诉我出了什么问题吗？是语法错误吗？

谢谢你！

Answer 1

你有一个错字。该动画名为.fade-imgnot .fade-bg。请参阅下面的代码片段。一点额外的东西：您可以添加animation-direction: alternate;以使图像平滑地淡入和淡出。

@keyframes fade-img {
  0%{
    opacity: 0;
  }
  100%{
    opacity: 0.5;
    filter: alpha(opacity=50);
  }
}

.img{
  max-width: 100%;
  animation-name: fade-img;
  animation-iteration-count: infinite;
  animation-duration: 2s;
  -webkit-transition: all 0.9s ease;
     -moz-transition: all 0.9s ease;
       -o-transition: all 0.9s ease;
          transition: all 0.9s ease;
  animation-direction: alternate;
}

<img src="https://i1.wp.com/img.celmaitare.net/wp-content/uploads/2014/12/Poze-Peisaje-179.jpg" class="img">

`