gpt4 book ai didi

css - SASS @for 循环动画问题

转载 作者:太空宇宙 更新时间:2023-11-04 10:05:24 24 4
gpt4 key购买 nike

我正在尝试逐个淡入一系列列表项,从页面上不可见变为可见但遇到问题。列表项在加载时在页面上可见,然后随着 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>

最佳答案

您可以从一开始就向 LI 添加不透明度,然后使用 animation-fill-mode 使其在动画状态时结束。比如这样:

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

我在这里创建了一个 fiddle :https://jsfiddle.net/dpzk740p/

关于css - SASS @for 循环动画问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38043337/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com