CSS3 to achieve animation effects

Today, I want to use css3 to achieve the effect of element shaking left and right, first look at the description of the animation properties in css3:

• CSS3 @keyframes rules
  To create animations in CSS3, you need to learn @keyframes rules.
  The @keyframes rule is used to create animations. Specifying a certain CSS style in @keyframes can create an animation effect that gradually changes from the current style to the new style.
  Internet Explorer 10, Firefox, and Opera support @keyframes rules and animation attributes.
  Chrome and Safari need the prefix -webkit-@keyframes.
  Instance

	@keyframes myfirst
	{
		from {background: red;}
		to {background: yellow;}
	}
	@-webkit-keyframes myfirst /* Safari 和 Chrome */
	{
		from {background: red;}
		to {background: yellow;}
	}

Animation is the effect of gradually changing elements from one style to another.
You can change any number of styles any number of times.
Please use a percentage to specify the time when the change occurs, or use the keywords "from" and "to", which are equivalent to 0% and 100%.
0% is the beginning of the animation, and 100% is the completion of the animation.
In order to get the best browser support, you should always define 0% and 100% selectors.
Example
Change the background color when the animation is 25% and 50%, and then change it again when the animation is 100% complete:

@keyframes myfirst
{
0%   {background: red;}
25%  {background: yellow;}
50%  {background: blue;}
100% {background: green;}
}
@-webkit-keyframes myfirst /* Safari 和 Chrome */
{
0%   {background: red;}
25%  {background: yellow;}
50%  {background: blue;}
100% {background: green;}
}![在这里插入图片描述](https://img-blog.csdnimg.cn/20190809105211511.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTE5MzAwNTQ=,size_16,color_FFFFFF,t_70)

• CSS3 animation property
  example

Run the animation named myfirst with all the animation properties set:

div
{
animation-name: myfirst;
animation-duration: 5s;
animation-timing-function: linear;
animation-delay: 2s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-play-state: running;
/* Safari 和 Chrome: */
-webkit-animation-name: myfirst;
-webkit-animation-duration: 5s;
-webkit-animation-timing-function: linear;
-webkit-animation-delay: 2s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
-webkit-animation-play-state: running;
}

The above is configured according to the standard attributes of the animation, and can also be written in abbreviated form:

The example
is the same as the animation above, but uses the shorthand animation property:

div
{
animation: myfirst 5s linear 2s infinite alternate;
/* Firefox: */
-moz-animation: myfirst 5s linear 2s infinite alternate;
/* Safari 和 Chrome: */
-webkit-animation: myfirst 5s linear 2s infinite alternate;
}

Let's get into the main topic below. Talk about how to make the element shake left and right:
first set @keyframes and the animation properties of the element

<style>
        .weui-badge{
            display:inline-block;
            padding:.15em .4em;
            min-width:8px;
            border-radius:18px;
            background-color:#F43530;
            color:#FFFFFF;
            line-height:1.2;
            text-align:center;
            font-size:12px;
            vertical-align:middle;
            animation:move 3s 0s infinite;-webkit-animation:move 3s 0s infinite;
            transform-origin:bottom;-webkit-transform-origin:bottom;
        }
        @keyframes move
        {
            0%, 65%{
                -webkit-transform:rotate(0deg);
                transform:rotate(0deg);
            }
            70% {
                -webkit-transform:rotate(6deg);
                transform:rotate(6deg);
            }
            75% {
                -webkit-transform:rotate(-6deg);
                transform:rotate(-6deg);
            }
            80% {
                -webkit-transform:rotate(6deg);
                transform:rotate(6deg);
            }
            85% {
                -webkit-transform:rotate(-6deg);
                transform:rotate(-6deg);
            }
            90% {
                -webkit-transform:rotate(6deg);
                transform:rotate(6deg);
            }
            95% {
                -webkit-transform:rotate(-6deg);
                transform:rotate(-6deg);
            }
            100% {
                -webkit-transform:rotate(0deg);
                transform:rotate(0deg);
            }
        }

        @-webkit-keyframes move
        {
            0%, 65%{
                -webkit-transform:rotate(0deg);
                transform:rotate(0deg);
            }
            70% {
                -webkit-transform:rotate(6deg);
                transform:rotate(6deg);
            }
            75% {
                -webkit-transform:rotate(-6deg);
                transform:rotate(-6deg);
            }
            80% {
                -webkit-transform:rotate(6deg);
                transform:rotate(6deg);
            }
            85% {
                -webkit-transform:rotate(-6deg);
                transform:rotate(-6deg);
            }
            90% {
                -webkit-transform:rotate(6deg);
                transform:rotate(6deg);
            }
            95% {
                -webkit-transform:rotate(-6deg);
                transform:rotate(-6deg);
            }
            100% {
                -webkit-transform:rotate(0deg);
                transform:rotate(0deg);
            }
        }
    </style>

Analysis of the code can be seen. By setting the @keyframes rule, the element will have no action at 0%-65%, that is, no rotation angle, starting from 70%-100% and swing
at 6 degrees. Set the animation in the weui-badge-like style as follows:

animation:move 3s 0s infinite;-webkit-animation:move 3s 0s infinite;
transform-origin:bottom;
-webkit-transform-origin:bottom;

That is to use the @keyframes rule, set the animation to complete a cycle action to 3s, set the animation to start from 0s, and specify that the animation should be played infinitely (infinite).
Set transform-origin:bottom to set the element rotation base point as the bottom center point. The default value is the center point of the element.