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

Question

我有一个示例：

链接

代码网页：

<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-img而不是.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">

'