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

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

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

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

1回答

746閲覧

CSSのアニメーションについて

teratail123

総合スコア1

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2021/04/30 05:45

編集2021/04/30 06:22

text-dividerをホバー時に左の横線が右に消えていく、右の横線が左に消えていくようなアニメーションを実装したいです(アニメーション時間は1秒を想定)。
この場合、.text-divider:hover {}でどのようなコードを書けば良いでしょうか。

html

1<div class="text-divider">+ MORE</div>

CSS

1.text-divider { 2 display: flex; 3 align-items: center; 4 color:gray; 5 font-size:15px; 6} 7.text-divider::before, 8.text-divider::after { 9 content: ''; 10 height: 1px; 11 background-color: gray; 12/* flex-grow: 1; */ 13 width:40%; 14 margin-left:20px; 15 margin-right:20px; 16 transition: 0.6s; 17}

イメージ説明

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

K_3578

2021/04/30 05:47

途中で送信されたんですかね。 質問は編集できますので、追記お願いします。 ソースコードはMarkDownの<code>ブロック内に貼り付けてご提示ください。
teratail123

2021/04/30 06:15

ご指摘ありがとうございます。 こちら修正いたしました。 どうかよろしくお願いします。
K_3578

2021/04/30 06:23 編集

私がコメントで解説するより下記質問の回答を見た方が視覚的で分かりやすいと思うので参照してください。 https://teratail.com/questions/238564 因みに編集中に右側に表示されているプレビューが我々が見えている物です。 プレビューを見ながら調整しましょう。
teratail123

2021/04/30 06:23

失礼しました。 こちらでよろしかったでしょうか。 ご確認願います。
guest

回答1

0

ベストアンサー

text-dividerをホバー時に左の横線が右に消えていく、右の横線が左に消えていくようなアニメーションを実装したいです(アニメーション時間は1秒を想定)。

テキストは中央配置のまま、左右の罫線が縮小して消えていくということかな。
だとしたら、 justify-content: center; で全体を中央配置にして、ホバー時の疑似要素の幅を 0 にすればいいでしょう。

css

1.text-divider { 2 display: flex; 3 justify-content: center; 4 align-items: center; 5 color:gray; 6 font-size:15px; 7} 8.text-divider::before, 9.text-divider::after { 10 content: ''; 11 height: 1px; 12 background-color: gray; 13 /* flex-grow: 1; */ 14 width:40%; 15 margin-left:20px; 16 margin-right:20px; 17 transition: 0.6s; 18} 19.text-divider:hover::before, 20.text-divider:hover::after { 21 width: 0; 22}

投稿2021/04/30 06:42

hatena19

総合スコア34075

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

teratail123

2021/04/30 06:53

hatena19さん ご丁寧にご回答ありがとうございます! 無事解決しました!誠にありがとうございますm(._.)m
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.35%

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

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

質問する

関連した質問