Question

我试图逐渐淡入一系列列表项目，从页面上不可见到可见但有问题。列表项在加载时在页面上可见，然后在编程css动画时淡入。如何首先隐藏列表元素然后让它们逐个淡化？

@keyframes foamy-fade {
    0%   {opacity:0}
    100% {opacity:1}
    }


li {
  background:#16a085;
  color:#fff;
  display:inline-block;
  font-family: lato;
  list-style: none;
  padding:10px 20px 14px 20px;
  text-align: center;
}

@for $i from 1 through 10 {
  li.item-#{$i} {
    animation-name:foamy-fade;
    animation-iteration-count: 1;
    animation-delay: 0.1s + $i / 7;
    animation-duration: 0.5s;
    animation-timing-function: linear;
  }
}

<head>

<link rel="stylesheet" href="sass/main.css">

</head>

<body>

<ul>
  <li class="item-1">Home</li>
  <li class="item-2">About</li>
  <li class="item-3">Gallery</li>
  <li class="item-4">Contact</li>
  <li class="item-5">Shop</li>
  <li class="item-6">Help</li>
  <li class="item-7">Cart</li>
  <li class="item-8">Checkout</li>
  <li class="item-9">Account</li>
  <li class="item-10">Login</li>
</ul>

</body>

Answer 1

您可以从一开始就向LI添加不透明度，并使用animation-fill-mode让它在动画状态下完成。比如这个：

opacity: 0;
animation-fill-mode: forwards;

我在这里创造了一个小提琴：https://jsfiddle.net/dpzk740p/

SASS @for循环动画问题

1 个答案: