cssアニメーション

前提・実現したいこと

cssのアニメーションの実装を行いたいと思っています

発生している問題・エラーメッセージ

最初はうまく動いていたのですが色々試したりしていたらなぜか動かなくなり単純なhoverでの動きになってしまいました…
特に変な風にいじったつもりはないのですがなぜアニメーションで動かなくなったのかがわからない状態です

該当のソースコード

html
1<!DOCTYPE html>
2<head>
3<meta charset="UTF-8">
4<link rel="stylesheet" href="stylecss.css">
5</head>
6<html>
7<body>
8     <div class="wrapper">
9          <div class="box">
10               <p>おいしい卵焼き</p>
11          </div>
12          <div class="damie">
13               <p>おいしい卵焼き</p>
14          </div>
15     </div>
16
17</body>        
18</html>

css
1*{
2    padding: 0;
3    margin: 0;
4}
5p, .damie{
6    font-size: 50px;
7    text-align: center;
8}
9
10p:hover::after, p:hover::before{
11    content:"";
12    border-bottom: solid 2px red;
13    display: inline-block;
14    width: 0px;
15
16    transition-property: width;
17    transition-duration: 1s;
18}
19p:hover::after, p:hover::before{
20    content:"";
21    border-bottom: solid 2px red;
22    display: inline-block;
23    width: 400px;
24}

試したこと

cssのwidthの単位が％とpxなんでダメなのかと思い単位を統一したりもしてみたけど変化なしでした

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

疑似要素と疑似クラスの併用が問題なのでは？と言われそうな気もするのですが順番的に疑似要素疑似クラスなら問題なく動くというブログ記事を見かけ実装しています。
確かに最初は動いていたのですがいじってなにがダメになったのか不明になってしまってます…。

m.ts10806

2020/10/02 07:44 編集

どういうアニメーションをどのようにしたいのか記載してください。要件・ゴールが明確になってないと答えようがありません。

eio

2020/10/02 07:52

すいません自分が初心者でなかなかわからないのですが、どういうアニメーションとゴール（動き？）というのはcssの記述しているのではだめなのでしょうか？－－変化前 p:hover::after, p:hover::before{ content:""; border-bottom: solid 2px red; display: inline-block; width: 0px; transition-property: width; transition-duration: 1s; } －－以下変化後 p:hover::after, p:hover::before{ content:""; border-bottom: solid 2px red; display: inline-block; width: 400px; } だと思っているのですが、文法の解釈がに間違っているのでしょうか？

m.ts10806

2020/10/02 07:54

質問は編集できますので適宜追記してください。 >すいません自分が初心者でなかなかわからないのですが、どういうアニメーションとゴール（動き？）というのはcssの記述しているのではだめなのでしょうか？「アニメーション」って動きが１個しかないわけではないですよね。どういう動きをさせたいんですか？と聞いています。どういう動きをさせたいのかわからないと、他者にはどう調整していいのかわかりませんので手が出せません。そこは「仕様」なので作りたい人が決めるものです。

eio

2020/10/02 07:57

んどういうことでしょうか？私が書いているコードにアニメーションは一つしか書いているつもりがなく意味がわからなくさらに困っております。質問は間違ってないと思っておりますが…

m.ts10806

2020/10/02 08:01 編集

>最初はうまく動いていたのですが色々試したりしていたらなぜか動かなくなり単純なhoverでの動きになってしまいました… 特に変な風にいじったつもりはないのですがなぜアニメーションで動かなくなったのかがわからない状態ですこの中には「どういう風に動いていたか」「どう動かしたいのか」が含まれていません。見てる人は赤の他人です。あなたがやりたいことは誰も知りません。他人になったつもりで読んでみてください、「うまく動いたってどんな風に動いてたの？」という疑問が出るはずです。

行動規範の内容に同意します

回答2件

hoverすると、幅をアニメーションさせたいなら、

hoverなしの場合の幅と、hoverの場合の幅を別々に設定しないと。

css
1p::after, p::before{
2    content:"";
3    border-bottom: solid 2px red;
4    display: inline-block;
5    width: 0px;
6    transition-property: width;
7    transition-duration: 1s;
8}
9p:hover::after, p:hover::before{
10    width: 400px;
11}

投稿2020/10/02 08:38

hatena19

総合スコア33715

eio

2020/10/02 08:47

回答いただきありがとうございます！なるほど変化後は幅しか書かなくてもいいのですね。確かに言われてみると変化はそこだけですね（汗）コードのシンプル化につながる回答までいただきありがとうございます＾＾もう少し（というかもっと）勉強しておきます！

行動規範の内容に同意します

ベストアンサー

こんばんは。

よくわかりませんが、こういうことですか？

css
1/* hoverを間違えてつけている？ p:hover::after, p:hover::before{ */
2p::after, p::before{
3    content:"";
4    border-bottom: solid 2px red;
5    display: inline-block;
6    width: 0px;
7
8    transition-property: width;
9    transition-duration: 1s;
10}
11