アニメーション画像内でのアニメーション表示について

HPのトップ画像（画像１）で右から徐々に表示するというアニメーションを付けており、その画像内に小さい画像（画像２）を上に重ねて表示しております。
その際に下記のコードを使い画像１は右から。。。画像２は左から。。。というアニメーションをつけたく、コードを記載したのですが、画像２が表示されなくなってしまいました。
デベロッパーツールでみると確かに表示はされているのですが、透明になってしまい次の要素の裏（positionを指定しなかった場合の場所）に隠れてしまっています。
そもそも画像２でposition指定をしているので、そこのエラーかと思いpositionを0にしてみたりしましたが、なかなかうまくいきません。。。
どこが原因か教えていただけませんでしょうか？
よろしくお願いいたします。

HTML
1<div class="top-box">
2   <div class="img-wrap_right">
3      <div class="topimg_title2">
4         <img src="common/images/top.png" alt="" >
5      </div>
6   </div>
7   <div class="img-wrap_left">
8      <div class="topimg_txt">
9         <img src="common/images/toptxt.png" alt="" >
10      </div>
11   </div>
12</div>

右から画像を表示する
※左からはtransform: translateX(100%);に変更しているだけです。

CSS
1.img-wrap_right {
2  position: relative;
3}
4
5.img-wrap_right:before {
6  background: #fff;
7  bottom: 0;
8  content: '';
9  left: 0;
10  pointer-events: none;
11  position: absolute;
12  right: 0;
13  top: 0;
14  z-index: 1;
15}
16.img-ani2 .img-wrap_right:before {
17  animation: img-wrap_right 2s cubic-bezier(.4, 0, .2, 1) forwards;
18}
19@keyframes img-wrap_right {
20  100% {
21    transform: translateX(-100%);
22  }
23}

画像２CSS

CSS
1.topimg_txt img{
2    width:63%;
3    
4    justify-content: center;
5    align-items: center;
6    
7    position: absolute;
8    top: 69%;
9    left: 0;
10}

Lhankor_Mhy

2020/02/13 02:48

ご提示のコードを当方で試してみましたが、画像2（common/images/toptxt.png）は表示されていました。つまり、問題が再現されませんでした。その代わりといっては何ですが、画像1（common/images/top.png）が表示されませんでした。 anagramさんは、ご提示いただいているコードだけで問題が再現しますか？再現するのであれば、環境の問題かと思います。再現しないのであれば、ご提示いただいていない部分の問題かと思いますので、問題が再現するコードをご提示ください。

anagram

2020/02/13 15:13

ご連絡遅くなってしまい申し訳ありません。確かに別のサンプルサイトで同じコードを記載すると画像表示がされなくなってしまいます。（こちらは画像１、２共にでした。） CSSやJavascript等も確認しましたが問題点が見つからず。。。 <div class="img-wrap_right">のCSSが原因のようですが、、、丸一日みて色々試しましたがわかりませんでした。。。申し訳ありません。。。下記が該当サイトなのですが、原因がわかったりしませんでしょうか？厚かましく申し訳ありませんがよろしくお願いいたします。 https://www.sbibs.jp/select-jobchange/

Lhankor_Mhy

2020/02/14 00:38

完成イメージがわからないのですが、「転職に可能性を」はどのあたりに表示したいのですか？

anagram

2020/02/15 00:29

そちらを説明しておらず申し訳ありません。下記のようにしたいです。 https://www.sbibs.jp/.service/preview/template/fb2aafe88483cb583e0f7df92c79b0e7c561a879.html

Lhankor_Mhy

2020/02/15 01:13

404です

anagram

2020/02/15 01:25

申し訳ありません、正しくはこちらです。 https://www.sbibs.jp/select-jobchange/test.html

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

回答1件

画像ではなくて、ラッパーを絶対配置した方が楽だと思います。
こうじゃないでしょうか。

css
1.img-wrap_left {
2	overflow: hidden;
3	/* position: relative; */
4	position: absolute;
5	top: 69%;
6}
7.topimg_txt img {
8	/* width: 63%; */
9	/* justify-content: center; */
10	/* align-items: center; */
11	/* position: absolute; */
12	/* top: 69%; */
13	/* left: 0; */
14}

投稿2020/02/15 01:40

Lhankor_Mhy

総合スコア36960

anagram

2020/02/17 03:28 編集

ご回答ありがとうございます。こちらでもできませんでした。。。画像の下部（topから69%のところ）に白い帯のようなものが入ってしまい表示崩れが起きてしまいしました。テスト環境でも再現ができなかったところを見ると今回記載していない部分が起因してうまくいかない可能性が高いのですかね・・・

Lhankor_Mhy

2020/02/17 03:44

> 画像の下部（topから69%のところ）に白い帯のようなものが入ってしまいえ、それではダメなのですか？ご提示いただいたカンプどおりですよね？

anagram

2020/02/17 03:53

いえ、テキスト入りの画像ではなく、ただただ白い余白のようなものが表示されます。（Width指定しても横Maxで表示されてしまいます。）デベロッパーツールでみるとその白い余白の中の左側に確かに指定の画像が入ってはいるのですが、見えずホワイトアウトしております。右側は本来の余白として表示されます。なのでtop69%の位置から完全に上下別れてしまっている状態です。つたない表現で申し訳ありません。

Lhankor_Mhy

2020/02/17 03:58

？？その白い帯はアニメーションさせる予定なのでは？「画像２は左から。。。というアニメーションをつけたく」「※左からはtransform: translateX(100%);に変更しているだけ」とはそういう意味ではないのですか？

Lhankor_Mhy

2020/02/17 04:04

まあ、どうしても白い帯を消したいなら、 .img-wrap_left:before のルールを全消ししたらいいかと思いますが……

anagram

2020/02/17 04:16

そのアニメーション自体（画像２）が機能せず白い帯が出ている状態です。＞「画像２は左から。。。というアニメーションをつけたく」「※左からはtransform: translateX(100%);に変更しているだけ」とはそういう意味ではないのですか？こちらが実装したいことで問題ありません。ややこしくてすいません。単純に画像２のアニメーションが起動せず、ただの白い画像（テキストなし）として表示されている状態です。

Lhankor_Mhy

2020/02/17 04:51

もう見れなくなってしまったので、何とも言えないのですが、私が拝見した時はアニメーション部分のCSSは未実装だったと思います。なので、これから作る予定なのかな、と思っていましたが、違うのですか？

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