0
私は、一連のリスト項目を1つずつフェードインしようとしています。 リストアイテムは、ロード時にページに表示され、CSSアニメーションがプログラムされたときにフェードインします。 リスト要素を最初に非表示にしてから、それらを1つずつフェードインさせることはできますか？SASS @forループアニメーションの問題
@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>