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

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

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

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

CSS

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

Q&A

解決済

3回答

1646閲覧

transitionでアニメーションする方法について

design_teratail

総合スコア14

HTML

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

CSS

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

0グッド

0クリップ

投稿2017/07/26 07:10

編集2017/07/26 08:41

###前提・実現したいこと
CSSでアニメーションしたいのですが、
思った通りの動作をしません。

###発生している問題・エラーメッセージ
アニメーションが動きません。

###該当のHTML

<div id="text" class=sblue_text"> <div class="test"> <a href="#">テスト</a> </div> </div>

###該当のCSS

.test::before{ content: ""; position: absolute; z-index: -1; left: 0; bottom: 0; background: #2098D1; height: 4px; -webkit-transition-property: right; transition-property: right; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; } .test a:hover { border-bottom: 4px solid #0054c2; line-height: 1.6em; display: inline-block; } /*追記*/ .test a { color: #0054c2; text-decoration: none !important; border-bottom: 4px solid #0054c2; padding: 0px 65px 5px 40px; }

###補足情報(言語/FW/ツール等のバージョンなど)
急ぎなので何か足りないところがあるかもしれません。
疑問などあったら遠慮なく。
よろしくお願いします。

###追記
a要素にマウスオーバーしたら、beforeにアニメーションがなるようにさせたいです。

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

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

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

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

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

kei344

2017/07/26 07:12

質問文のコードはそれぞれコードブロックで囲んでいただけませんか? ```(バッククオート3つ)で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。
kei344

2017/07/26 07:14

提示のCSSが不足しているため、そもそも動くはずも無いコードになっています。関連するコードを提示されたほうが回答しやすいと思います。
kei344

2017/07/26 07:53

どの要素のどのプロパティをアニメーションさせたいのでしょうか。
design_teratail

2017/07/26 08:07

a要素にマウスオーバーしたら、beforeにアニメーションがなるようにさせたいです。
kei344

2017/07/26 08:09

.test::beforeのどのプロパティを何から何に変化させたいのでしょうか。
design_teratail

2017/07/26 08:14

a要素は平常時、下に線(実際はbackgroundで線のように見せている)がある状態で、マウスオーバーしたら、線が左から右に流れるようなアニメーションにしたいです。
kei344

2017/07/26 08:18

少なくとも平常時のスタイルは再現可能なものを提示されてはいかがでしょうか。
design_teratail

2017/07/26 08:42

忘れていましたが、.test a にもスタイルがありました。
guest

回答3

0

css

1 2.test::before { 3 4}

の::beforeは必要ないのではないでしょうか?

投稿2017/07/26 07:12

編集2017/07/26 07:12
MasakazuFukami

総合スコア1869

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

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

design_teratail

2017/07/26 07:22

コードが少なくて申し訳ないですが、追記しました。 before部分に実現したい箇所があります。
MasakazuFukami

2017/07/26 07:35

ちょっと内容がわからなかったので適当に作ったのですが、before下要素をどうにかしたい感じですか? 何が何をしたらどのようにアニメーションするのかを追記していただけないとアドバイスしようがないかもしれないですねー ```html <div id="text" class=sblue_text"> <div class="test"> <a href="#">テスト</a> </div> </div> ``` ```css .test{ position:relative; } .test::before{ content: ""; position: absolute; z-index: -1; right: 0; bottom: 0; background: #2098D1; width: 4px; height: 4px; transition: right 1s ease; } .test:hover::before{ right: 100px; } /* .test a:hover { border-bottom: 4px solid #0054c2; line-height: 1.6em; display: inline-block; } */ ```
design_teratail

2017/07/26 08:11

追記しましたが、 a要素にマウスオーバーしたら、beforeにアニメーションがなるようにさせたいです。
guest

0

ベストアンサー

CSS

1/* 2.test::before 3*/ 4.test a::before{ /* a要素につける */ 5 content: ""; 6 position: absolute; 7 z-index: -1; 8 left: 0; 9 bottom: 0; 10 background: #2098D1; 11 height: 4px; 12/* 13-webkit-transition-property: right; 14transition-property: right; 15*/ 16-webkit-transition-duration: 0.3s; 17transition-duration: 0.3s; 18-webkit-transition-timing-function: ease-out; 19transition-timing-function: ease-out; 20} 21.test a:hover { 22/* 23 border-bottom: 4px solid #0054c2; 24*/ 25 line-height: 1.6em; 26/* 27 display: inline-block; 28*/ 29} 30.test a { 31 display: inline-block; /* 追加 */ 32 position: relative; /* 追加 */ 33 line-height: 1.2em; /* 追加 */ 34 color: #0054c2; 35 text-decoration: none !important; 36/* 37 border-bottom: 4px solid #0054c2; 38*/ 39 padding: 0px 65px 5px 40px; 40-webkit-transition-duration: 0.2s; /* 追加 */ 41transition-duration: 0.2s; /* 追加 */ 42-webkit-transition-timing-function: ease-out; /* 追加 */ 43transition-timing-function: ease-out; /* 追加 */ 44} 45 46.test a::before{ 47 width: 0; 48} 49.test a:hover::before{ 50 width: 100%; 51} 52```**動くサンプル:**[https://jsfiddle.net/uuom0ovu/](https://jsfiddle.net/uuom0ovu/)

投稿2017/07/26 08:53

kei344

総合スコア69366

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

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

design_teratail

2017/07/31 04:58

ありがとうございました。 参考になりました。
guest

0

期待される結果としてはaタグにマウスが乗るとその親のdiv.test::beforeをアニメーションさせたいということと思われますが、現状aタグの親要素を指定するセレクタが存在しないので無理です。

代替としては、div.testにマウスが乗った時にアニメーションをう、くらいだと思います。

css

1.test:hover::before { 2 opacity: 1; 3} 4 5.test::before { 6 content: "a"; 7 opacity: 0; 8 transition: all 1s; 9}

https://jsfiddle.net/takmatz/23xex1y7/

投稿2017/07/26 08:26

退会済みユーザー

退会済みユーザー

総合スコア0

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

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

design_teratail

2017/07/26 08:35

>現状aタグの親要素を指定するセレクタが存在しない 詳しく教えてはもらえないでしょうか。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問