I am trying to fade in a series of list items one after each other going from not visible on the page to visible but having trouble. The list items are visible on the page upon load and then fade in as the css animation is programmed to do. How can i hide the list elements first and then have them fade in one by one?
@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>
Aucun commentaire:
Enregistrer un commentaire