.li {
opacity: 0;
position: relative;
transition: all .3s ease-in-out;
}
.li:nth-child(1) {
transform: translateY(20px);
animation: cssFadeIn 0.3s ease-in-out 0.5s 1 forwards;
}
.li:nth-child(2) {
transform: translateY(20px);
animation: cssFadeIn 0.3s ease-in-out 1s 1 forwards;
}
.li:nth-child(3) {
transform: translateY(20px);
animation: cssFadeIn 0.3s ease-in-out 1.5s 1 forwards;
}
.li:nth-child(4) {
transform: translateY(20px);
animation: cssFadeIn 0.3s ease-in-out 2s 1 forwards;
}
.li:nth-child(5) {
transform: translateY(20px);
animation: cssFadeIn 0.3s ease-in-out 2.5s 1 forwards;
}
.li:nth-child(6) {
transform: translateY(20px);
animation: cssFadeIn 0.3s ease-in-out 3s 1 forwards;
}
@keyframes cssFadeIn {
100% {
opacity: 1;
transform: translateY(0px);
}
}
More than 5 years have passed since last update.
Register as a new user and use Qiita more conveniently
- You get articles that match your needs
- You can efficiently read back useful information
- You can use dark theme