html css で二行目以降のフェードインの方向が操作できない

発生している問題

一行目のテキストのフェードインは、transform: translatex(-500px)で左から右へと流れるように表示できるのですが、二行目のテキストはその場のフェードインしかされません。どうすれば一行目だけじゃなく、それ以降のテキストもtranslateで操作できるようになるでしょうか？
不明瞭な文章で申し訳ございません。どうか、宜しくお願い致します。

該当のソースコード

HTML
1<!DOCTYPE>
2<html>
3  <head>
4    <script src="jquery-3.5.1.min.js"></script>
5    <script type="text/javascript" src="na.js"></script>
6    <link rel="stylesheet" href="nayami.css">
7  </head>
8  <body>
9    <p>株式会社あああ</p><br><br><br><br>
10    <div class="a">あああああああ</div>←このテキストは左から右へとフェードインされる。
11    <dic class="b">Peace of mind for a broken heart</div>←二行目のテキストから通常のフェードインしかされない。
12　　</body>
13   </html>
14

css
1.a{
2  font-family: serif;
3  width: 530px;
4  font-size: 70px;
5  border-bottom: solid 1px;
6  animation-name: my-fade-in;
7  animation-duration: 1.1s;
8}
9
10@keyframes my-fade-in {
11  from {
12    opacity: 0;
13    transform: translatex(-500px);
14
15  }
16  to {
17    opacity: 1;
18  }
19}
20
21.b{
22  font-size: 22px;
23  font-family: serif;
24  animation-name: my-fade-in2;
25  animation-duration: 1.7s;
26}
27
28
29@keyframes my-fade-in2 {
30  from{
31    opacity: 0;
32    transform: translatex(-50px);←ここをいじってもブラウザでは何も変わらない。
33  }
34  to{
35    opacity: 1;
36  }
37}