目次
画面外から要素をスライド表示する
コンテンツをふわっと横からスライドインさせるアニメーションは、ページの動きにメリハリをつけたいときに役立ちます。JavaScriptを使わずCSSだけで実装できるのが魅力です。
HTML
|
1 2 3 |
<div class="slide-in">スライド表示される要素</div> |
基本CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
.slide-in { animation: slideFromLeft 0.5s ease-out forwards; } @keyframes slideFromLeft { from { opacity: 0; transform: translateX(-100px); } to { opacity: 1; transform: translateX(0); } } |
備考・注意点
transformとopacityの組み合わせで自然な動きに調整します。
animationにはforwardsを指定しないと元に戻ってしまう点に注意。
