css transitionの設定の仕方について

  • 解決済 9-taro

    (@9-taro)


    3年、 9ヶ月前

    初心者のものです。
    下記のようなに、リンクの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件中)
  • ishitaka

    (@ishitaka)

    3年、 9ヶ月前

    こんにちは

    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; }

    moyo55

    (@moyo55)

    3年、 9ヶ月前

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

    .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)

    3年、 9ヶ月前

    ishitaka 様

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

    moyo55 様

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

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