css3实现轮播图

<div class="ani"></div>
.ani{
    width: 880px;
    height: 320px;
    margin: 50px auto;
    overflow: hidden;
    box-shadow: 0 0 5px rgba(0, 0, 0, 1);
    background-size: cover;
    background-position: center;
    animation: loops 20s linear infinite reverse;
  }
  @keyframes loops {
    0%{
      background: url('https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1854635992,1610324708&fm=26&gp=0.jpg') no-repeat;
    }
    25%{
      background: url('https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic3.16pic.com%2F00%2F53%2F22%2F16pic_5322554_b.jpg&refer=http%3A%2F%2Fpic3.16pic.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1614951188&t=41e07703837348841a8d9bf843cf6b90') no-repeat;
    }
    50%{
      background: url('https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fnwzimg.wezhan.cn%2Fcontents%2Fsitefiles2018%2F10091979%2Fimages%2F2823700.png&refer=http%3A%2F%2Fnwzimg.wezhan.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1614951188&t=a5315f5dda045268d7d02ee71b84852e') no-repeat;
    }
    75%{
      background: url('https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fbpic.588ku.com%2Fback_pic%2F05%2F64%2F18%2F335b62d01db7358.jpg%21r850%2Ffw%2F800&refer=http%3A%2F%2Fbpic.588ku.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1614951188&t=3c36b97afbf576f0ebbc084340b260ae') no-repeat;
    } 
    100%{
      background: url('https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fbpic.588ku.com%2Fback_pic%2F03%2F78%2F35%2F1157c13cc012a5e.jpg&refer=http%3A%2F%2Fbpic.588ku.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1614951188&t=40d0adbd27ca21cebaabea7cca43a7f1') no-repeat;
    }
  }