サポート » 使い方全般 » css transitionの設定の仕方について

  • 解決済 9-taro

    (@9-taro)


    初心者のものです。
    下記のようなに、リンクのhoverの際、コンテンツメニューに太い下線をつけているのですが、
    下線をゆっくりと、表示させるにはどう指定したらいいでしょうか?
    下記の指定だと、下線が上から下にふわっと動いてしまいます。
    よろしくお願いします。

    .menu a {transition: 0.5s ease-out}
    .menu a:visited {padding-bottom:25px; display:inline; text-decoration:none; border-bottom:3px solid; color: #252525; }
    .menu a:hover {padding-bottom:25px; display:inline; text-decoration:none; border-bottom:3px solid; color: #252525; ;}
    .menu a:active {padding-bottom:25px; display:inline; text-decoration:none; border-bottom:3px solid; color: #252525; }

3件の返信を表示中 - 1 - 3件目 (全3件中)
  • こんにちは

    padding-bottom もアニメーション可能なプロパティなのでアニメーションします。
    https://developer.mozilla.org/ja/docs/Web/CSS/CSS_animated_properties

    よって、こんな感じではどうでしょうか?

    .menu a {transition: 0.5s ease-out}

    .menu a {transition: 0.5s ease-out; padding-bottom: 25px; }

    実物を見ないとなんともですが、とりあえずこんな感じでどうですか。

    .menu a {
    	transition: 0.5s ease-in;
    	padding-bottom:25px;
    	border-bottom:3px solid transparent;
    }
    .menu a:visited,
    .menu a:hover,
    .menu a:active {
    	display:inline;
    	text-decoration:none;
    	border-color: #252525;
    	color: #252525;
    }

    線が下に移動する理由ですが、aタグにpaddingの指定が無くhoverなどの操作時にpadding領域がゆっくり確保されるためそういう挙動になります。
    三箇所変更しています。

    1. aタグの方にpaddingを指定しました。
    2. ゆっくりと線が表示されるように、ease-inに変更しました。
    3. aタグの方に透明のボーダーを指定しhover等の方にborder-colorを指定しました。
      (もし線が徐々に太くなるようにしたい場合はhover等の方のみにborder-bottomを指定してください。)
    トピック投稿者 9-taro

    (@9-taro)

    ishitaka 様

    早速、ご返信ありがとうございました。
    ご指摘とても参考になりました。

    moyo55 様

    親切丁寧なご説明ありがとうございました。
    display:inline;を.menu aに追加したら、希望して通りのアニメーションになりました。
    とてもわかりやすいご説明で、勉強になりました。
    また機会がございましたら、お願いします。

3件の返信を表示中 - 1 - 3件目 (全3件中)
  • トピック「css transitionの設定の仕方について」には新たに返信することはできません。