css实现shake动画

html:

<div className={style.shake} style={
      {
       position: "fixed", top: 0, bottom: 0, left: 0, right: 0, margin: "auto", width: 100, height: 150, backgroundColor: 'red' }}>div>

css:

.shake {
     
  animation: shake 2s linear infinite;
}
@keyframes shake {
     
  0%,
  100% {
     
    transform: rotate(0deg) scale(0.8);
  }

  10% {
     
    transform: rotate(2deg);
    transform: scale(1);
  }

  15%,
  25%,
  35% {
     
    transform: rotate(-4deg);
  }

  20%,
  30%,
  40% {
     
    transform: rotate(4deg);
  }

  45% {
     
    transform: rotate(-2deg);
  }

  50% {
     
    transform: rotate(2deg);
  }

  55%,
  90% {
     
    transform: rotate(0deg);
  }
}

你可能感兴趣的:(css3,html,animation)