Question

我有一个样本：

代码HTML：

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

CODE 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">

`

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

1 个答案: