お問い合わせ

    氏名

    メールアドレス

    件名

    メッセージ本文



    763万 キーワード

    2021年 検索パフォーマンス

    57.8万 人が訪問

    2021年 訪問ユーザー数

    WordPressのスキルアップはこちら!▶[click]
    いま、どうしてる? 誰でも検索できます

    【CSS】アニメーションで画像や文字を遅延表示(遅れて表示)させる方法|CSS animation

    CSS(シーエスエス)
    この記事は約2分で読めます。
    「ワードプレスで未来を変える!」
    誰でも挑戦できます!!
    【未経験挑戦可!】スキルアップしたい!WordPressに挑戦したい!何かに挑戦して未来を変えたい!という方をお待ちしています↓↓

    CSSで遅延アニメーションを作りたい

    WEBサイトを見ていると「画像や要素が遅れて表示されている!」という、かっこいいWEBサイトを見る場面も多いかと思います。

    複雑なものはどうなっているのかよく分かりませんが、CSSの基本アニメーションだけでも割と簡単に作れましたので、ご興味がありましたらぜひお試しいただければと思います。

    ■サンプルページはこちら

    サンプルページ

    アニメーション(animation:)を使う

    animation-fill-mode - CSS: カスケーディングスタイルシート | MDN
    CSS の animation-fill-mode プロパティは、 CSS アニメーションの実行の前後にどう対象にスタイルを適用するかを設定します。

    使い方はシンプルです。animation:でアニメーションを指定、@keyframesでアニメーションの名前を指定して、透明→不透明に変化をさせることで、ふわっと表示されるような表現を作ることができます。

    .columns {
    animation: fadeInBox 4s linear;
    }
    
    @keyframes fadeInBox{
    0%{
    opacity: 0;
    }
    100%{
    opacity: 1;
    }
    }

    上記の場合、4秒間の一定速度で不透明度0%→100%に変化していきます。

    @keyframes - CSS: カスケーディングスタイルシート | MDN
    CSS の @keyframes @-規則は、アニメーションの流れに沿ったキーフレーム (または中間地点) のスタイルを定義することによって、一連の CSS アニメーションの中間ステップを制御します。

    まとめ

    今回は、CSSのアニメーションだけで表現する方法についてのご紹介でした。Javascriptを使うともっと複雑な表現も可能だと思いますが、CSSだけでも十分に目的の表現は可能では?とも思います。

    【アニメーション設定後】

    「CSSで遅延アニメーションを作りたい・・・!」と思ったときは、ぜひご参考ください😃

    ■サンプルページはこちら

    サンプルページ

    次回は、下の方を少しずつ表示させる・・・といったような方法を挑戦してみたいと思います。

    ご参考下さい😃

    Loading
    タイトルとURLをコピーしました