vue 首页图片停留10秒淡入淡出效果

朋友推荐的一个展示效果：https://codepen.io/jnboyer/pen/qZLeWN?__cf_chl_jschl_tk__=4db4eff5d4872bd0ba8c0726ea2841c868cb52fd-1594638715-0-Af3ZEKToHb2myZUPH1JFluZ0xgw447GSAiF3Khhfoj0YSZQU3yEPxwfsvtw2tIpVNNX3NOLrmdTGedZZpaW80pBwzjpOB_WlC78BlW1xVGdMJ8e3U4r66UTTM5b1j0u_sKFgc5FHIM47p1yb9gB9XoBv9hmaFl1sR-_KC_6lHHR0mmt4HlR3L3-G8dfKetb5rA5dx3fcBMA3oQDs_gFWVn_DrB9FhjfVzArXTPh5Hb2RxRDGtkJsiZFh_ttfXR7LguKjOadTY3U5IQQRnSA_CAMcsVP3VRHptshLu5ka9_W5BRVLUX7r1r7AiVAyYljVfrUqN9hr8YMvs49JvUUKdIEADzveLS5S7kvnSgUwg5Gt

我的思路是将要展示的图片都放在一个div里面通过定时器，动态控制要展示那一张

html

 script

style

.welcome__banner {     position: relative;     background: rgba(255, 255, 255, 1);     border-radius: 6px;     height: 30%;     width: 100%;
    .banner__img {       // position: absolute;       width: 100%;       height: 100%;
      // animation: fade 10s 0s infinite;       animation-name: fade; //规定需要绑定到选择器的 keyframe 名称。。       animation-duration: 5s; //规定完成动画所花费的时间，以秒或毫秒计。       animation-timing-function: ease-in-out; //规定动画的速度曲线。       // animation-delay: 2s; //规定在动画开始之前的延迟。       animation-iteration-count: infinite; //规定动画应该播放的次数。       animation-direction: normal; //规定是否应该轮流反向播放动画。       z-index: 50;     }
    @keyframes fade {       0% {         opacity: 0.1;       }       25% {         opacity: 0.75;       }       50% {         opacity: 0.5;       }       75% {         opacity: 0.75;       }       100% {         opacity: 1;       }     }   }