CSS3 para lograr efectos de animación

Hoy, quiero usar css3 para lograr el efecto de movimiento del elemento a la izquierda y a la derecha, primero mire la descripción de las propiedades de animación en css3:

Reglas de @keyframes de CSS3
Para crear animaciones en CSS3, debe aprender las reglas de @keyframes.
La regla @keyframes se usa para crear animaciones. Al especificar un determinado estilo CSS en @keyframes, puede crear un efecto de animación que cambia gradualmente del estilo actual al nuevo.
Internet Explorer 10, Firefox y Opera admiten las reglas de @keyframes y los atributos de animación.
Chrome y Safari necesitan el prefijo -webkit- @ keyframes.
Ejemplo

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

La animación es el efecto de cambiar gradualmente elementos de un estilo a otro.
Puede cambiar cualquier número de estilos tantas veces como desee.
Utilice un porcentaje para especificar el momento en que se produce el cambio, o utilice las palabras clave "desde" y "hasta", que equivalen a 0% y 100%.
0% es el comienzo de la animación y 100% es la finalización de la animación.
Para obtener la mejor compatibilidad con el navegador, siempre debe definir selectores de 0% y 100%.
Ejemplo
Cambie el color de fondo cuando la animación sea del 25% y del 50%, y luego cámbielo nuevamente cuando la animación esté completa al 100%:

@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)

Ejemplo de propiedad de animación CSS3

Ejecute la animación denominada myfirst con todas las propiedades de animación establecidas:

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;
}

Lo anterior se configura de acuerdo con las propiedades estándar de la animación, y también se puede escribir en forma abreviada:

El ejemplo
es el mismo que el de la animación anterior, pero usa la propiedad de animación abreviada:

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;
}

Entremos en el tema principal a continuación. Hable sobre cómo hacer que el elemento se mueva hacia la izquierda y hacia la derecha:
primero configure @keyframes y las propiedades de animación del elemento

<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>

Se puede ver el análisis del código. Al establecer la regla @keyframes, el elemento no tendrá acción en 0% -65%, es decir, sin ángulo de rotación, comenzando desde 70% -100% y girando
a 6 grados. Establezca la animación en el tipo de insignia weui estilo de la siguiente manera:

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

Es decir, usando la regla @keyframes, configure la animación para completar una acción de ciclo como 3s, configure la animación para que comience en 0s y especifique que la animación debe reproducirse infinitamente (infinita).
Establezca transform-origin: bottom para establecer el punto base de rotación del elemento como el punto central inferior. El valor predeterminado es el punto central del elemento.

CSS3 para lograr efectos de animación

Supongo que te gusta