CSSだけでスライドインアニメーション（@keyframes）

画面外から要素をスライド表示する

画面外から要素をスライド表示する

コンテンツをふわっと横からスライドインさせるアニメーションは、ページの動きにメリハリをつけたいときに役立ちます。JavaScriptを使わずCSSだけで実装できるのが魅力です。

HTML


<div class="slide-in">スライド表示される要素</div>

<div class="slide-in">スライド表示される要素</div>

基本CSS


.slide-in {
  animation: slideFromLeft 0.5s ease-out forwards;
}

@keyframes slideFromLeft {
  from {
    opacity: 0;
    transform: translateX(-100px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.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を指定しないと元に戻ってしまう点に注意。