CSS3アニメーション属性に基づくWeChatタップアニメーション効果の実装

@-webkit-keyframes シェイク {
    0% {
        -webkit-transform: translate(2px, 2px);
    }

    25% {
        -webkit-transform: translate(-2px, -2px);
    }

    50% {
        -webkit-transform: translate(0px, 0px);
    }

    75% {
        -webkit-transform: translate(2px, -2px);
    }

    100% {
        -webkit-transform: translate(-2px, 2px);
    }
}

@keyframes シェイク {
    0% {
        変換: translate(2px, 2px);
    }

    25% {
        変換: translate(-2px, -2px);
    }

    50% {
        変換: translate(0px, 0px);
    }

    75% {
        変換: translate(2px, -2px);
    }

    100% {
        変換: translate(-2px, 2px);
    }
}

.シェイク{
    位置: 相対的;
    上: 30px;
    左: 100px;
    高さ: 200px;
    幅: 200ピクセル;
    色: #ff0000;
    背景: #000;
}

.shake:hover {
    -webkit-animation: 0.2 秒のシェイクを無限に実行します。
    アニメーション: 0.2 秒無限にシェイクします。
}
 /*アクティビティスイングアニメーション*/
 @-webkit-keyframes スイング {
  10% {
    変換: 回転(15度);
  }
  20% {
    変換: 回転(-10度);
  }
  30% {
    変換: 回転(5度);
  }
  40% {
    変換: 回転(-5度);
  }
  50%,100% {
    変換: 回転(0度);
  }
}
@-moz-keyframes スイング {
  10% {
    変換: 回転(15度);
  }
  20% {
    変換: 回転(-10度);
  }
  30% {
    変換: 回転(5度);
  }
  40% {
    変換: 回転(-5度);
  }
  50%,100% {
    変換: 回転(0度);
  }
}
@-o-keyframes スイング {
  10% {
    変換: 回転(15度);
  }
  20% {
    変換: 回転(-10度);
  }
  30% {
    変換: 回転(5度);
  }
  40% {
    変換: 回転(-5度);
  }
  50%,100% {
    変換: 回転(0度);
  }
}
@keyframes スイング {
  10% {
    変換: 回転(12度);
  }
  20% {
    変換: 回転(-11.5度);
  }
  30% {
    変換: 回転(1度);
  }
  40% {
    変換: 回転(-1度);
  }
  50%,100% {
    変換: 回転(0.5度);
  }
}
.ずらす {
  背景色: #ff0000;
  幅: 60ピクセル;
  高さ: 60px;
}
.stagger1{
  アニメーション: スイング 0.5 秒 0.15 秒 リニア 1;
  /* アニメーション再生状態: 一時停止; */
}
 <!-- qq ウィンドウが揺れる -->
  <div class="shake">qq ウィンドウシェイク</div>
  <!-- WeChatアバターが揺れる-->
  <div class="stagger">WeChat パットアバターが揺れる</div>

document.querySelector('.stagger').addEventListener('click', function() {
      document.querySelector('.stagger').classList.add('stagger1')
      console.log('パパが赤ちゃんを小突いた')
})
	/*クリックごとにアニメーションが実装され、監視アニメーションの終了に注意し、アニメーションクラスを削除してからアニメーションクラスを追加します document.querySelector('.stagger').addEventListener('animationend', function() {
      document.querySelector('.stagger').classList.remove('stagger1')
    })