【CSS】覚えておきたい動き　下からふわっと出てくる

こんにちは！縁紡ぐです！
今回は、CSS アニメーションです。画像がしたからふわっと出てきたり、左から画像が流れるように出てきたりするアニメーションのご紹介です。ぜひ参考にしてみてください。

画像をおしゃれに登場させる

ホームページと言えば写真や、画像といっても過言じゃないほど大切です。ただ表示させるだけでなく、どうやったら注目してもらえるかを動きをつけることでオシャレさと、見てもらえるようにしたいと思います。

下から画像を登場させる

っとようにして、やわらかさを出したいと思います。

<div class="slide">
    <img class="slide-image" src="/goronouen/images/ランチ.jpg" alt="ランチ">
</div>

.slide {
    position: relative;
}

.slide-image {
    position: absolute;
    /* 親の要素の幅に合わせる */
    width: 100%;
    /* ブロックに変更 */
    display: inline-block;
    /* keyframesの指定 */
    animation-name: fadeup;
    /* 終了までの時間指定 */
    animation-duration: 2s;
    /* 速度の調整 */
    animation-timing-function: ease;
    /* アニメーション終了時の状態で100%時のスタイル適用 */
    animation-fill-mode: forwards;
}

@keyframes fadeup {
    0% {
        transform: translateY(100px);
        opacity: 0;
    }
    80% {
        opacity: 1;
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

画像が左から流れるようにする

次は、画像を左から流れるようにしていきます。

<body>
    <div class="slide">
        <img class="slide-image" src="/goronouen/images/ランチ.jpg" alt="ランチ">
    </div>
</body>

.slide {
    /* はみ出た部分を隠す */
    overflow: hidden;
    /* 親の基準位置 */
    position: relative;
    /* イメージを中央 */
    text-align: center;
  }
  
.slide::before {
    /* 疑似要素 */
    content: '';
    /* 親要素の位置 */
    position: absolute;
    /* アニメーション名前 */
    animation-name: kfm-slide;
    /* 実行時間 */
    animation-duration: 2s;
    /* 速度の調整 */
    animation-timing-function: ease;
    /* アニメーション終了時の状態で100%時のスタイル適用 */
    animation-fill-mode: forwards;
    /* バックグラウンドカラー */
    background: #fff;
    /* 画面領域最大 */
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    /* ポインターイベント */
    pointer-events: none;
    /* 表示順指定 */
    z-index: 1;
}

@keyframes kfm-slide {
    100% {
        transform: translateX(100%);
    }
}