animationする下線を任意の位置にしたいです

前提・実現したいこと

文字の下に現れる下線が
中央から全体に、
←　→「にょーん」と伸びるアニメーションを作っています。

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

最後のアニメーションは、中央によってくれているのですが、
最初のアニメーションの発生位置に、
transform: translateX(-50%);
がきかず、原因が分からないでおります。

該当のソースコード

HTML
1<h1>タイトルが入ります</h1>

Sass
1    h1{
2        @include Title((50/1280)*100vw,900);
3        color: $AccentColor;
4        padding: 1.5% 0;
5        position: relative;
6            &:after{
7                display: block;
8                content: "";
9                width: 40%;
10                height: 1px;
11                background: $AccentColor;
12                position: absolute;
13                bottom: 12%;
14                left: 50%;
15                transform: translateX(-50%);　←中央にもっていきたかった
16                animation: 2s slidein;
17                @keyframes slidein {
18                    0% {
19                        transform: scaleX(0);
20                      }
21                      100% {
22                        transform: scaleX(1);
23                      }
24                }
25            }
26    }

CSS
1
2.main-visual h1 {
3  font-size: 3.90625vw;
4  font-family: "playfair-display", serif;
5  font-style: normal;
6  font-weight: 900;
7  line-height: 1em;
8  color: #cdae75;
9  padding: 1.5% 0;
10  position: relative;
11}
12
13.main-visual h1:after {
14  display: block;
15  content: "";
16  width: 40%;
17  height: 1px;
18  background: #cdae75;
19  position: absolute;
20  bottom: 12%;
21  left: 50%;
22  -webkit-transform: translateX(-50%);
23          transform: translateX(-50%);
24  -webkit-animation: 2s slidein;
25          animation: 2s slidein;
26}
27
28@-webkit-keyframes slidein {
29  0% {
30    -webkit-transform: scaleX(0);
31            transform: scaleX(0);
32  }
33  100% {
34    -webkit-transform: scaleX(1);
35            transform: scaleX(1);
36  }
37}
38
39@keyframes slidein {
40  0% {
41    -webkit-transform: scaleX(0);
42            transform: scaleX(0);
43  }
44  100% {
45    -webkit-transform: scaleX(1);
46            transform: scaleX(1);
47  }
48}

試したこと

最初の方に、transform: translateX(-50%);をつける必要があるのだろうかと思い、
.main-visual h1:after の疑似要素からtransform: translateX(-50%);を取って、

@keyframes slidein
の方に、transform: translateX(-50%);をつけてみました。

CSS
1.main-visual h1 {
2  font-size: 3.90625vw;
3  font-family: "playfair-display", serif;
4  font-style: normal;
5  font-weight: 900;
6  line-height: 1em;
7  color: #cdae75;
8  padding: 1.5% 0;
9  position: relative;
10}
11
12.main-visual h1:after {
13  display: block;
14  content: "";
15  width: 40%;
16  height: 1px;
17  background: #cdae75;
18  position: absolute;
19  bottom: 12%;
20  left: 50%;　　←transform: translateX(-50%);は取っ払った
21  -webkit-animation: 2s slidein;
22          animation: 2s slidein;
23}
24
25@-webkit-keyframes slidein {
26  0% {
27    -webkit-transform: scaleX(0);
28            transform: scaleX(0);
29    -webkit-transform: translateX(-50%);　
30            transform: translateX(-50%);　←こっちにつけてみた
31  }
32  100% {
33    -webkit-transform: scaleX(1);
34            transform: scaleX(1);
35    -webkit-transform: translateX(-50%);
36            transform: translateX(-50%);
37  }
38}
39
40@keyframes slidein {
41  0% {
42    -webkit-transform: scaleX(0);
43            transform: scaleX(0);
44    -webkit-transform: translateX(-50%);
45            transform: translateX(-50%);
46  }
47  100% {
48    -webkit-transform: scaleX(1);
49            transform: scaleX(1);
50    -webkit-transform: translateX(-50%);
51            transform: translateX(-50%);
52  }
53}

しかしそうすると、確かに最初から中央によってはくれるのですが、
今度はアニメーションしてくれません。

試しに、

Sass
1    h1{
2        @include Title((50/1280)*100vw,900);
3        color: $AccentColor;
4        padding: 1.5% 0;
5        position: relative;
6            &:after{
7                display: block;
8                content: "";
9                width: 40%;
10                height: 1px;
11                background: $AccentColor;
12                position: absolute;
13                bottom: 12%;
14                left: 50%;
15                transform: translateX(-50%);
16                animation: 2s slidein;
17                @keyframes slidein {
18                    0% {
19                        opacity: 0;/*初期状態では透明に*/
20                        transform: scaleX(0);
21                        transform: translateX(-50%);
22                      }
23                      100% {
24                        opacity: 1;
25                        transform: scaleX(1);
26                        transform: translateX(-50%);
27                      }
28                }
29            }
30    }

CSS
1
2.main-visual h1 {
3  font-size: 3.90625vw;
4  font-family: "playfair-display", serif;
5  font-style: normal;
6  font-weight: 900;
7  line-height: 1em;
8  color: #cdae75;
9  padding: 1.5% 0;
10  position: relative;
11}
12
13.main-visual h1:after {
14  display: block;
15  content: "";
16  width: 40%;
17  height: 1px;
18  background: #cdae75;
19  position: absolute;
20  bottom: 12%;
21  left: 50%;
22  -webkit-transform: translateX(-50%);
23          transform: translateX(-50%);
24  -webkit-animation: 2s slidein;
25          animation: 2s slidein;
26}

こうしてみたのですが、
これだと、位置は良く、透明から不透明になり、そこそこ自分の思い描く形に近いのですが、
transform: scaleX(0)→ scaleX(1);
になる、にょーーーんという動きがなくなりました。
opacity: 0;/初期状態では透明に/を取ると、何も動かないままです。

これは、どういったことが原因で起きるのでしょうか？
何かヒントを頂けましたら幸いです。

宜しくお願いいたします。

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

回答1件

ベストアンサー

css
1                        transform: scaleX(0);
2                        transform: translateX(-50%);

とすると、後のtransformの設定が前のものを上書きします。

transform に複数の値を設定する場合は下記のように一括で設定してください。

css
1@keyframes slidein {
2  0% {
3            transform: translateX(-50%) scaleX(0);
4  }
5  100% {
6            transform: translateX(-50%) scaleX(1);
7  }
8}