###前提・実現したいこと
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にアニメーションがなるようにさせたいです。
質問文のコードはそれぞれコードブロックで囲んでいただけませんか? ```(バッククオート3つ)で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。
提示のCSSが不足しているため、そもそも動くはずも無いコードになっています。関連するコードを提示されたほうが回答しやすいと思います。
修正しました。失礼しました。
どの要素のどのプロパティをアニメーションさせたいのでしょうか。
a要素にマウスオーバーしたら、beforeにアニメーションがなるようにさせたいです。
.test::beforeのどのプロパティを何から何に変化させたいのでしょうか。
a要素は平常時、下に線(実際はbackgroundで線のように見せている)がある状態で、マウスオーバーしたら、線が左から右に流れるようなアニメーションにしたいです。
少なくとも平常時のスタイルは再現可能なものを提示されてはいかがでしょうか。
忘れていましたが、.test a にもスタイルがありました。
回答3件
あなたの回答
tips
プレビュー