質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
86.12%
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

解決済

transition-propertyが効かない

amagiri
amagiri

総合スコア68

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

1回答

0グッド

0クリップ

344閲覧

投稿2022/04/15 11:25

前提・実現したいこと

aタグの要素に対してhover時にborderが下がりながら消えるアニメーションをつけようとしているんですが、transitionの値にborderを指定すると、その場から一瞬で消えるようになります。対象(property)を指定せず、値を「.3s」だけにするとアニメーション自体は想定通りの動きをしますが、ボーダー以外もアニメーションが適応されてしまいます。
borderだけにアニメーションを適応できないのはなぜでしょうか?

該当のソースコード

HTML

1<div class="top-image"> 2 <figure> 3 <img src="../images/pickup1.jpg"> 4 <figcaption>タイトルテキストテキストテキストテキストテキストテキストテキスト</figcaption> 5 <div class="top-text"> 6 <p><a href="#">READ MORE</a></p> 7 </div><!-- /top-text --> 8 </figure> 9 <figure> 10 <img src="../images/pickup2.jpg"> 11 <figcaption>タイトルテキストテキストテキストテキストテキストテキストテキスト</figcaption> 12 <div class="top-text"> 13 <p><a href="#">READ MORE</a></p> 14 </div><!-- /top-text --> 15 </figure> 16 <figure> 17 <img src="../images/pickup3.jpg"> 18 <figcaption>タイトルテキストテキストテキストテキストテキストテキストテキスト</figcaption> 19 <div class="top-text"> 20 <p><a href="#">READ MORE</a></p> 21 </div><!-- /top-text --> 22 </figure> 23 </div><!-- /top-image -->

CSS

1@charset "utf-8"; 2 3/* ====== 共通 ====== */ 4html,body { 5 font-size: 16px; 6} 7 8body,div,p,h1,h2,h3,h4,h5,h6,ul,li,figure { 9 margin: 0; 10 padding: 0; 11} 12 13p,td,th,li { 14 line-height: 1.8; 15} 16 17a { 18 text-decoration: none; 19} 20 21li { 22 list-style: none; 23} 24 25.container { 26 max-width: 1000px; 27 margin: 0 auto; 28} 29 30 31/* ====== main ====== */ 32.top-image { 33 display: flex; 34 justify-content: space-between; 35 padding: 150px 0 35px 0; 36} 37 38.top-image figure { 39 width: 31%; 40} 41 42.top-image figcaption { 43 font-weight: bold; 44 padding-top: 10px; 45 font-size: 14px; 46 line-height: 1.7; 47 letter-spacing: 1px; 48} 49 50.top-image img { 51 width: 100%; 52} 53 54.top-text { 55 text-align: center; 56 padding-top: 20px; 57} 58 59.top-text p { 60 display: inline-block; 61 font-size: 13px; 62 line-height: 1; 63} 64 65.top-text a { 66 position: relative; 67 border-bottom: 1px solid #333; 68 display: inline-block; 69 transition: border .3s; /* 問題のプロパティ */ 70 bottom: 2px; 71 color: black; 72} 73 74.top-text a:hover { 75 opacity: 0; 76 bottom: -4px; 77}

試したこと

transition-duration: .3s;
transition-property: border;
としても同じようにdurationの方を無視して一瞬で消えました。

補足情報(FW/ツールのバージョンなど)

dynabook V72/JLE
型番:PV82JLECNRDQE

以下のような質問にはグッドを送りましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

グッドが多くついた質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

下記のような質問は推奨されていません。

  • 間違っている
  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

回答1

1

ベストアンサー

opacityは全部が消えちゃうので
borderだけ消すのはどうでしょうか。

css

1.top-text a { 2 position: relative; 3 border-bottom: 1px solid #333; 4 display: inline-block; 5 transition: .3s; /* 問題のプロパティ */ 6 bottom: 2px; 7 color: black; 8} 9 10.top-text a:hover { 11 border-bottom: 1px solid #3330; 12/* opacity: 0; */ 13 bottom: -4px; 14}

2022-04-16追記

borderはpaddingの外側にあるので、borderを動かす為にpaddingを操作してます。
ただそのままだと、増えたpadding分、後続の要素に影響を与えてしまうので
borderの外側にあるmarginも操作してバランスをとっています。

css

1.top-text a { 2 color: black; 3 position: relative; 4 border-bottom: 1px solid #333; 5 display: inline-block; 6 transition: all .3s; 7 /* 問題のプロパティ */ 8/* bottom: 2px; */ 9 padding-bottom:0; 10 margin-bottom:0.4em; 11} 12 13.top-text a:hover { 14 border-bottom: 1px solid #3330; 15/* opacity: 0; */ 16/* bottom: -4px; */ 17 padding-bottom:0.4em; 18 margin-bottom:0; 19} 20.text-content{ 21 padding:2em; 22 text-align:center; 23 background:tomato; 24}
<div class="top-image">の後に兄弟要素として追加してください。 チェック用の後続要素です。

html

1<div class="text-content">The quick brown fox jumps over the lazy dogThe quick brown fox jumps over the lazy dogThe quick brown fox jumps over the lazy dog</div>

投稿2022/04/15 12:38

編集2022/04/16 00:43
recal

総合スコア1124

amagiri👍を押しています

良いと思った回答にはグッドを送りましょう。
グッドが多くついた回答ほどページの上位に表示されるので、他の人が素晴らしい回答を見つけやすくなります。

下記のような回答は推奨されていません。

  • 間違っている回答
  • 質問の回答になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

このような回答には修正を依頼しましょう。

回答へのコメント

amagiri

2022/04/15 13:38

rgbaの存在を失念していました!アニメーションはボーダーだけに適応させたいのですが、やはりtransition-propertyが必要になりますか?recalさんのCSSだとテキストも一緒に下がってしまいますよね?
recal

2022/04/15 23:05 編集

テキストの位置を動かしたくてbottomをつけているんだと思ってました。 borderの位置と透明度だけアニメーションさせたいという事でしょうか? bottom:2pxとbottom:-4pxを消せば透明度だけのアニメーションにはなります。
amagiri

2022/04/16 02:15

いえ、消えるだけでなく下がりながら消えるアニメーションです。
recal

2022/04/16 09:04

いえ、が何に対してなのかわかりませんでした。主語が欲しいです。
amagiri

2022/04/16 12:22

すみません、borderの「位置」という部分を飛ばして読んでおり、さらに最後に透明度だけのアニメーションの話をしていたのでrecalさんが透明度だけアニメーションを加えようとしていると勘違いしてしまいました。アニメーションに関してはborderを下げながら消したいんです。
amagiri

2022/04/16 15:00

たった今追記のソース確認してまいりました。大変お手数をおかけしました。非常に勉強になりました、ありがとうございます。

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
86.12%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。