页面元素逐个渐入

单个和多个元素

/* 单个 */
[data-fade] {
  --lv: 0;
  --delay: 0.1s;
  --start: 0ms;
  --anima: latter-slice-top;
}
@for $i from 1 through 20 {
  [data-fades] > *:nth-child(#{$i}) {
    --lv: #{$i};
  }
}

/* 段落 */
[data-fades] > * {
  --lv: 0;
  --delay: 0.1s;
  --start: 0ms;
  --anima: latter-slice-top;
  animation: var(--anima) 0.5s both;
  animation-delay: calc(var(--start) + var(--lv) * var(--delay));
}

@media (prefers-reduced-motion: no-preference) {
  [data-fades] > *,
  [data-fade] {
    animation: var(--anima) 0.5s both;
    animation-delay: calc(var(--lv) * var(--delay) + var(--start));
  }
}

[data-fade-controller="false"][data-fade] {
  animation: none;
}
[data-fades-controller="false"][data-fades] > * {
  animation: none;
}

/* 渐进动画 下进入 */
@keyframes latter-slice-top {
  0% {
    opacity: 0;
    transform: translateY(12px);
  }

  to {
    transform: none;
  }
}
/* 渐进动画 */
@keyframes latter-slice-left {
  0% {
    opacity: 0;
    transform: translateX(12px);
  }
  to {
    transform: none;
  }
}
@keyframes latter-slice-right {
  0% {
    opacity: 0;
    transform: translateX(-12px);
  }
  to {
    transform: none;
  }
}

示例

<!-- 单个 -->
<li data-fade  style="--lv: 0">1</li>
 
<!-- 多段落 -->
<ul data-fades style="--lv: 1;">
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
</ul>

效果

打开

1、单个

1

2、多个

• 1
• 2
• 3
• 4
• 5