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

2021-08-2397次阅读csssass

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
上一篇: React配置@根目录  下一篇: exports只是module.exports的一个引用  

css3 animation利用 animation-delay实现简单的轮播相关文章