アニメーションでの進行方向

前提・実現したいこと

疑似要素のwidthを100%から0にしている要素を出したいのですが、右から左にアニメーションが実行されます。
これを逆にしたいのですがどうすれば良いのでしょうか？

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

エラーメッセージ

該当のソースコード

html

<p></p>
 
scss
 p {
              
        position: relative;
        width: 100px;
        margin:0 auto;
                &:after {
            background-color: blue;
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 0;
            height: 100%;
            width: 100%;
            animation-name: wid;
            animation-duration: 1s;
            animation-fill-mode: forwards;
            animation-iteration-count: 1;
        }

        @keyframes wid {
            0% {
                width: 100%;
            }

            100% {
                width: 0%;
            }
        }
    }
ソースコード

試したこと

animation-directionなど試してみたのですがうまく行きませんでした。

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

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

回答1件

ベストアンサー

それは、仕様上仕方ないかと思いますので・・・。
leftを同時に動かす、とかいかがでしょうか。
意図した動きにならなかったら、コメントいただければと思います。

css
1p {
2  position: relative;
3  width: 100px;
4  margin:0 auto;
5  &:after {
6    background-color: blue;
7    content: '';
8    position: absolute;
9    top: 0;
10    left: 0;
11    width: 0;
12    height: 100%;
13    width: 100%;
14    animation-name: wid;
15    animation-duration: 1s;
16    animation-fill-mode: forwards;
17    animation-iteration-count: 1;
18  }
19
20  @keyframes wid {
21    0% {
22      left: 0;
23      width: 100%;
24    }
25    100% {
26      left: 100%;
27      width: 0%;
28    }
29  }
30}