210907タイトルエリアアニメーション

ボタンを押したときに表示されるヘッダーバックグラウンドイメージは、実行するアニメーションがscaleであると判断し、コードを記述しましたが、実行できません

参照动漫效果

私が作成したコード(エラー)

/* scss 형식 */
.pre {
    @include button;
    left: 20px;
    opacity: 0;

    &:active {
        .headers {
            animation: scale 0.6s cubic-bezier(0.645, 0.045, 0.355, 1) forwards;
        }
    }
}

アニメーショントリガ

だから私は鐘沢にアドバイスを求めた.
cssアニメーション効果をあげたい배경이미지가 변경될 때마다まずcssアニメーショントリガを与える方法を知っておく必要があります
このサイトの内容は参考まで

・CSS 애니메이션1つのCSSスタイルから→別の構成へのWeb要素の変換をサポート

ブラウザがロード時に定義した動画を起動できる

CSSアニメーション트리거クラスの追加と削除に依存するアクティビティ

AMPは2種類のアニメタイプをサポート

AMPとは?

加速移動ページの略

Googleによって開始された項目は、移動通信用のファストページを意味する

最近サイトを作り、メディア検索で大解像度から小解像度まで対応

アニメーション効果のあるクラス名を作成したいのですが.
どうすればいいのか悩んだが、その部分は哲鎮に助けられた.

問題解決プロセス1

<div
className={`headers ${this.makeClass(currentSlide)}`}
style={{ backgroundImage: imgArr[currentSlide] }}
></div>

@keyframes scaleStyle {
  0% {
    transform: scale(1.2);
    opacity: 0.2;
  }

  100% {
    transform: scale(1);
    opacity: 0.7;
  }
}

/* scss형식 */
.headers {
    position: relative;
    height: 600px;
    margin-bottom: 80px;
    padding-right: 20px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0.6;

    &.scaleAnimation {
      animation: scaleOne 0.6s cubic-bezier(0.645, 0.045, 0.355, 1) forwards;
    }

このようなアニメーション効果を実行してみましたが、起動しませんでした.
その理由がまだ見つからず、見つけようとしたら記録して・・・

問題解決プロセス2

makeClass = current => {
    const obj = {
        0: 'odd',
        1: 'even',
        2: 'odd',
        3: 'even',
        4: 'odd',
        5: 'even'
    };
    return obj[current];
};

@keyframes scaleOne {
  0% {
    transform: scale(1.2);
    opacity: 0.2;
  }

  100% {
    transform: scale(1);
    opacity: 0.7;
  }
}

@keyframes scaleTwo {
  0% {
    transform: scale(1.2);
    opacity: 0.2;
  }

  100% {
    transform: scale(1);
    opacity: 0.7;
  }
}

/* scss 형식 */
.headers {
    position: relative;
    height: 600px;
    margin-bottom: 80px;
    padding-right: 20px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0.6;

    &.odd {
      animation: scaleOne 0.6s cubic-bezier(0.645, 0.045, 0.355, 1) forwards;
    }

    &.even {
      animation: scaleTwo 0.6s cubic-bezier(0.645, 0.045, 0.355, 1) forwards;
    }

だから上のコードのようです.
1番目、3番目、5番目のアニメーション名と
2番目、4番目、6番目のアニメーションの名前を同じにします.
1つ目が2つ目に移行すると、別のアニメーションを実行することを指定します(実際には内容は同じですが、異なる名前しか指定されていません)、驚くべきことに実行されました.