スライドしながら入ってくるリスト
クリックCSSのみリスト
- List Item
- List Item
- List Item
- List Item
少しずつタイミングをズラしながら右からスライドしながら出現するリストのアニメーションです
実装のポイント
ほんの少しopacityのアニメーションを短く、そして開始をほんの少し遅延させることで、動き始めのアニメーションを見せずに動いている最中から見せているようにしています。
作例はシュッとした動きですが、ここの遅延時間やデュレーションの調整で ゆったりとした感じにもできます。ただ、遅延時間を伸ばしすぎるとリストの流れが感じられず、個々に動いているようになってしまうので注意が必要です。（作例では0.08秒ずつ遅延）
コード例
HTML
<ul class="sampleList">
<li class="sampleItem" style="--index: 1">List Item</li>
<li class="sampleItem" style="--index: 2">List Item</li>
<li class="sampleItem" style="--index: 3">List Item</li>
<li class="sampleItem" style="--index: 4">List Item</li>
</ul>
CSS
.sampleItem {
--ease-in-out-quart: cubic-bezier(0.76, 0, 0.24, 1);
translate: 2.5em 0;
opacity: 0;
&.isActive {
transition:
opacity 0.3s calc(0.08s * var(--index) + 0.1s) var(--ease-in-out-quart),
translate 0.5s calc(0.08s * var(--index)) var(--ease-in-out-quart);
opacity: 1;
translate: 0 0;
}
}