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

【问题标题】：Infinite animation create with keyframes CSS使用关键帧 CSS 创建无限动画
【发布时间】：2017-10-18 07:33:28
【问题描述】：

我有一个样本：

编码 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 秒后重复这个动画，但它不明白为什么它不起作用。

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

谢谢！

【问题讨论】：

标签： html css css-animations

【解决方案1】：

你有一个错字。动画被称为.fade-img 而不是.fade-bg。请参阅下面的代码 sn-p。一点额外的东西：您可以添加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;
}

&lt;img src="https://i1.wp.com/img.celmaitare.net/wp-content/uploads/2014/12/Poze-Peisaje-179.jpg" class="img"&gt;

【讨论】：

你的眼睛很敏锐；-)
谢谢！这是我没有被打败的少数几次之一：D