別の画像遷移効果にズームアウトするにはどうすればよいですか

2番目の画像、3番目の画像などにズームアウトして画像を切り替えたいと思っています。背景画像とスケールを使用して、いくつかのキーフレームを使って自分で作成してみましたが、2つの問題があったことを除いて、ちゃんと機能しました。1.テキストとボタンもスケーリングされました。2.画像の持続時間が短すぎました。含めますが、探していたものではなかったので削除しました。これが純粋なCSSで実行できる方法があるかどうかは、少なくとも簡単にはわかりません。だから私はJSを使用する必要があるだろうことに傾いていますか？これが私の現在のコードです。

.jumbo {
  display: flex;
  flex-direction: column;
  justify-content: Center;
  margin: 0;
  width: 100vw;
  height: 100vh;
  min-height:100vh;
  background: linear-gradient(rgba(255, 255, 255, 0.1), rgba(0, 0, 0, 0.3)),
    url("images/j-img1.png");
  background-repeat:no-repeat;
  background-position: center center;
  -webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.jumbo-text {
  text-align: center;
  color: white;
  font-weight: 600;
}

/* Jumbo button */
.vmore-button {
  text-align: center;
  border: 2px solid white;
  text-transform: uppercase;
  padding: 16px;
  align-self: Center;
  margin: 20px;
  border-radius: 5px;
  font-weight: 600;
  font-size: 24px;
  transition: 0.5s ease;
  color: white;
  max-height: 70px;
  cursor:pointer;
}

    <div class="jumbo">
      <h2 class="jumbo-text">
        Welcome to LLG
      </h2>
      <h3 class="jumbo-text animated slideInLeft delay-1s" style="color:#e8e8e8; font-weight:500;">
        Memorable Gaming Experience, High Quality Servers.
      </h3>
      <a class="vmore-button hvr-icon-pulse-shrink" href="#viewmore">View more<br><i class="fas fa-arrow-circle-down hvr-icon"></i></a>
    </div>

スニペットを展開

html css

— ティム
ソース

あなたが試みたコードを提供した方が良かったと思います、私はあなたが話していることを見ることができません...または私の英語は良くないかもしれません

— Ayman Morsy

アニメーションに関連するコードがないこの不明確な質問の+8について

— 知りたい

回答:

コンテナーdivと2つの子ディバイダーが必要です。最初の子はズーム/トランジションの画像を処理し、2番目の子はテキストを含める必要があります。画像とテキストの仕切りの両方を絶対的に配置して、互いの上に配置する必要があります。親コンテナに特定のクラスを適用することにより、アクティブ/表示されるスパン/イメージを変更できます。

<div class="container">
  <div class="images">
    <img>
    <img>
    <img>
  </div>
  <div class="text">
    <span>TextA</span>
    <span>TextB</span>
    <span>TextC</span>
  </div>
</div>

— トム・ショー
ソース

おかげで、これは私が達成しようとしていることの良い出発点になると思います。

— ティム

さらにいくつかの質問。画像とテキストの両方に絶対を適用する必要がありますか？私はそれをいじくり回してそれをしました、そしてテキストが画像の上に現れます。ただし、画像は通常のドキュメントフローのままです。実際の画像に自分自身で絶対的なものを置くまでは、それが下から上へと読み取られます。そして私はJSを目に見えるクラスを適用するために私たちにしなければならないでしょうか？

— ティム

それは素晴らしい質問です。画像は絶対スタイルを設定でき、不透明度ディゾルブ効果を実行したり、画像を横からスライドインするインラインブロックで表示したり、下から上に回転するtranslateYを使用してブロックとアニメーションを表示したりできます。このyoutu.be/tkXUzVNl6Rw?t=68を

— Tom Shaw

いいですね。しかし、なぜ最後から最後まで画像を表示するのか、何かご存知ですか？

— ティム

これがあなたの要求から何を意味するのかはわかりません

.jumbo {
  display: flex;
  flex-direction: column;
  justify-content: Center;
  margin: 0;
  width: 100vw;
  height: 100vh;
  min-height:100vh;
  background: linear-gradient(rgba(255, 255, 255, 0.1), rgba(0, 0, 0, 0.3)),
    url("https://img.freepik.com/free-vector/abstract-colorful-flow-shapes-background_23-2148258092.jpg");
  background-repeat:no-repeat;
  background-position: center center;
  -webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.jumbo-text {
  text-align: center;
  color: white;
  font-weight: 600;
}

/* Jumbo button */
.vmore-button {
  text-align: center;
  border: 2px solid white;
  text-transform: uppercase;
  padding: 16px;
  align-self: Center;
  margin: 20px;
  border-radius: 5px;
  font-weight: 600;
  font-size: 24px;
  transition: 0.5s ease;
  color: white;
  max-height: 70px;
  cursor:pointer;
}
@media only screen and (max-width: 600px) {
  .jumbo {
    background: linear-gradient(rgba(255, 255, 255, 0.1), rgba(0, 0, 0, 0.3)),
    url("https://images.pexels.com/photos/531880/pexels-photo-531880.jpeg");
  }
}

<div class="jumbo">
  <h2 class="jumbo-text">
    Welcome to LLG
  </h2>
  <h3 class="jumbo-text animated slideInLeft delay-1s" style="color:#e8e8e8; font-weight:500;">
    Memorable Gaming Experience, High Quality Servers.
  </h3>
  <a class="vmore-button hvr-icon-pulse-shrink" href="#viewmore">View more<br><i class="fas fa-arrow-circle-down hvr-icon"></i></a>
</div>

スニペットを展開

幅が600以下の場合に画像が配置されます。あなたはそれをテストすることができます

— ヘシャム・モハメド
ソース