CSS3 realizes the red envelope shaking effect

There is a requirement to realize the shaking effect of red envelopes. I have never done it before. I will record it. Hehe~~
The transform: rotate() property is used here, and animation is added to achieve the animation effect. I won’t go into the code.

.red_packet {
  width: 180rpx;
  height: 220rpx;
  position: fixed;
  top: 10rpx;
  right: 20rpx;
  color: #D60E19;
  animation: shake .5s linear infinite;
}
@keyframes shake {

  25% {
    transform: rotate(7deg);
  }
  75% {
    transform: rotate(-7deg);
  }

  50%,
  100% {
    transform: rotate(0);
  }
}

The effect that was initially achieved was like this

It keeps swinging left and right, but the desired effect is to shake twice every few seconds. What should I do if animation does not support interval animation? After searching on Baidu, I found that by setting the percentage, the first three seconds will not move, and the shaking will start from 70%, and it must be fast, accurate and ruthless. After some improvement, the effect is as follows:

.red_packet {
  width: 180rpx;
  height: 220rpx;
  position: fixed;
  top: 10rpx;
  right: 20rpx;
  color: #D60E19;
  animation: shake 3s linear infinite;
}

@keyframes shake {

  70%, 80% {
    transform: rotate(7deg);
  }
  75% {
    transform: rotate(-7deg);
  }

  65%,
  85% {
    transform: rotate(0);
  }
}

This is the end of this article about how to achieve red envelope shaking effect with CSS3. For more relevant CSS3 red envelope shaking content, please search for previous articles on 123WORDPRESS.COM or continue to browse the related articles below. I hope you will support 123WORDPRESS.COM in the future!