お問い合わせ

    氏名

    メールアドレス

    件名

    メッセージ本文



    763万 キーワード

    2021年 検索パフォーマンス

    57.8万 人が訪問

    2021年 訪問ユーザー数

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

    【CSS】マウスオーバーした時に浮き上がる表現をする方法|transition&transform|hoverした時のホバーアニメーション

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

    CSS要素のホバーアニメーション

    「hoverした時にふわっとしたアニメーションをさせたくて…。」そんなことを考えながら、記事の一覧ページで、マウスオーバーした時に、フワッと浮き出るような表現を作りたい…!と思った時に使えるCSSの方法です。

    サンプルページはこちら

    サンプルページ

    CSSで枠がフワッと浮き上がるような表現にしたい

    今でもまあ…決して悪くはないのですが、まぁ…ちょっと浮いたような表現にしたい…、みたいな。ことを思ってしまったので、ちょっと試してみたいと思います。

    ※このようなイメージで、マウスオーバーした時にふわっと浮き出るような表現を作りたい。

    CSSアニメーションの「transition:」を使う

    CSSの「transition:」を使うことで、表現できます。

    transition は、transition-property、 transition-duration、 transition-timing-function、 transition-delay の一括指定プロパティとなります。

    transitionについての詳細は、こちら▼

    transition - CSS: カスケーディングスタイルシート | MDN
    transition は CSS のプロパティで、 transition-property、 transition-duration、 transition-timing-function、 transition-delay の一括指定プロパティです。
    CSS トランジションの使用 - CSS: カスケーディングスタイルシート | MDN
    CSS トランジションは、 CSS プロパティが変化する際のアニメーションの速度を操作する手段を提供します。プロパティの変更を直ちに有効にするのではなく、プロパティの変更を一定期間にわたって発生させることを可能にします。

    transition: 対象のプロパティ アニメーションにかかる時間 イージング 遅延時間;
    transition: transition-property transition-duration transition-timing-function transition-delay;

    https://www.webdesignleaves.com/pr/css/css_basic_07.html

    width が0.5秒で変化し、その後(height の遅延時間が0.5秒) height が0.5秒で変化し、続いて(line-height の遅延時間が1秒)line-height が0.2秒で変化します。

    transition: width 0.5s ease 0s, height 0.5s ease-in 0.5s, line-height 0.2s linear 1s;

    設定例:リスト部分にtransitionを設定

    アニメーションさせる対象の CSS プロパティを指定(box-shadow)、アニメーションにかかる時間0.1s、イーズアウトで変化。(クラス名などは適時変更しましょう)

    .widget ul li {
    transition: box-shadow 0.1s ease-out;
    }

    CSSアニメーションの「transform:」を使う

    transition:を設定したら:hoverを設定します。さらに、transform:で位置を移動させます。これにより、マウスオーバー時にbox-shadowすなわち「影」が移動します。

    .widget ul li:hover {
      box-shadow: 0px 5px 5px 0px rgb(0, 0, 0);
      transform: translateY(-10px);
    }
    transform - CSS: カスケーディングスタイルシート | MDN
    transform は CSS のプロパティで、与えられた要素を回転、拡大縮小、傾斜、移動することできます。これは、 CSS の視覚整形モデルの座標空間を変更します。

    これで、ひとまずの設定は完了です。

    アニメーションできました!

    box-shadow:を追加した場合は、このようになります。

    .widget ul li:hover {
      box-shadow: 0px 5px 5px 0px rgb(0, 0, 0);
    }

    transform:を追加した場合は、このようになります。

    .widget ul li:hover {
      transform: translateY(-10px);
    }

    これで、両方を組み合わせると、マウスオーバー時にリンク(li)部分がフワッと浮き出たような動きになります…!

    .widget ul li:hover {
      box-shadow: 0px 5px 5px 0px rgb(0, 0, 0);
      transform: translateY(-10px);
    }

    マウスオーバーした時に、translateY(-10px);でちょっと上に浮いて、ボックスシャドウで周囲に影が出るようになります。

    まとめ

    という感じで、transition&transformを上手く組み合わせると、マウスオーバー時にフワッと浮いたような表現をすることができるようになります。

    サンプルページはこちら

    サンプルページ

    ご参考ください😃

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