css3 animation利用 animation-delay实现简单的轮播

css3 animation利用animation-delay可以实现一个简单的三屏轮播例子。

.slider__item {
    animation: ani 6s infinite linear both;
    @for $i from 1 to 4 {
      &:nth-child(#{$i}) {
        animation-delay: (-1+$i)*2s;
      }
    }
}
@keyframes ani {
  0%, 33.33% {opacity: 1; visibility: visible;}
  33.34%, 100% {opacity: 0; visibility: hidden;}
}

Demo： http://codepen.io/Yetty/pen/KNvRxZ/

原文网址：https://jelly.jd.com/article/6006b1045b6c6a01506c87ca