javascript - 如何使用CSS动画图像？

Question

我正在尝试使用 css 从左到右翻译我的图像。但它不能正常工作。 我试试这个 css

ul{
  padding:0px;
  margin:0px;
}

.imageSlider {
  width :325px;
  overflow:hidden;
  transition: width 2s;
   position:relative;
}
.imageSlider ul {
  width:3250px;

}

.imageSlider ul li{
  display:inline-block;
  width :325px;
  transition: all 1s ease;
   transition: width 2s;
}

.imageSlider ul li img{
    transition: all 1s ease;
   transition: width 2s;
}

.imageSlider ul li span{
  position:absolute;
  left:0;
  color:#fff;
  bottom:5px

}

我想做成那样 http://mumbaimirror.indiatimes.com/其中图像移动 right to left 动画，同时从一个图像更改为另一个图像

这是我的代码 https://jsbin.com/lexicazefu/edit?html,css,js,output

$(function(){
  var counter =0;
  var length =$('.imageSlider ul li').length;
   setInterval(function(){
     if(counter >= length){
       counter =0
     }
     $('.imageSlider ul li').hide();
     console.log(counter)
     $('.imageSlider ul').children('li').eq(counter).show();
          counter ++;

   },5000);
})

我不想使用 jquery 。我们可以使用 css 制作动画图像吗

Answer 1

您可以尝试CSS 动画，并在@keyframes 中分配它们。像这样的东西:

@keyframes slide {
  0% { left: 0%; }
  20% { left: 0%; }
  25% { left: -100%; }
  45% { left: -100%; }
  50% { left: -200%; }
  70% { left: -200%; }
  75% { left: -300%; }
  95% { left: -300%; }
  100% { left: -400%; }
}

并且根据您的图像，您可以分配.imageSlider 的宽度。并使用 display: flex 将它们彼此对齐。

看看下面的工作片段:

.imageSlider {
  overflow: hidden;
  width: 320px;
}

.imageSlider ul {
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
  left: 0;
  text-align: left;
  position: relative;
  animation: 30s slide infinite;
}

.imageSlider ul li {
  float: left;
}

.imageSlider ul li a {
  display: block;
}

.imageSlider ul li img {
  margin: 0 auto;
}

@keyframes slide {
0% { left: 0%; }
20% { left: 0%; }
25% { left: -100%; }
45% { left: -100%; }
50% { left: -200%; }
70% { left: -200%; }
75% { left: -300%; }
95% { left: -300%; }
100% { left: -400%; }
}

  <div>
   <div class="imageSlider">
      <ul>
         <li><a><img src="http://mumbaimirror.indiatimes.com/thumb/msid-59691652,width-320,height-385,resizemode-4.cms"></a>
        </li>
        <li><a><img src="http://mumbaimirror.indiatimes.com/thumb/msid-59691954,width-320,height-385,resizemode-4.cms"></a>
        </li>
        <li><a><img src="http://mumbaimirror.indiatimes.com/thumb/msid-59692159,width-320,height-385,resizemode-4.cms"></a>
        </li>
        <li><a><img src="http://mumbaimirror.indiatimes.com/thumb/msid-59691142,width-320,height-385,resizemode-4.cms"></a>
        </li>
      </ul>
   </div>
</div>

希望这对您有所帮助!