애니메이션 효과를 얻기위한 CSS3

오늘 저는 css3를 사용하여 요소가 좌우로 흔들리는 효과를 얻고 싶습니다. 먼저 css3의 애니메이션 속성에 대한 설명을 살펴 보겠습니다.

CSS3 @keyframes 규칙
CSS3에서 애니메이션을 만들려면 @keyframes 규칙 을 배워야합니다.
@keyframes 규칙은 애니메이션을 만드는 데 사용됩니다. @keyframes에 특정 CSS 스타일을 지정하면 현재 스타일에서 새 스타일로 점진적으로 변경되는 애니메이션 효과를 만들 수 있습니다.
Internet Explorer 10, Firefox 및 Opera는 @keyframes 규칙 및 애니메이션 속성을 지원합니다.
Chrome 및 Safari에는 접두사 -webkit- @ keyframes가 필요합니다.
예

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

애니메이션은 요소를 한 스타일에서 다른 스타일로 점진적으로 변경하는 효과입니다.
여러 스타일을 여러 번 변경할 수 있습니다.
백분율을 사용하여 변경 발생 시간을 지정하거나 0 % 및 100 %에 해당하는 "시작"및 "종료"키워드를 사용하십시오.
0 %는 애니메이션의 시작이고 100 %는 애니메이션의 완료입니다.
최상의 브라우저 지원을 얻으려면 항상 0 % 및 100 % 선택자를 정의해야합니다.
예제
애니메이션이 25 % 및 50 % 일 때 배경색을 변경하고 애니메이션이 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)

CSS3 애니메이션 속성
예제

모든 애니메이션 속성을 설정하여 myfirst라는 애니메이션을 실행합니다.

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

위의 내용은 애니메이션의 표준 속성에 따라 구성되며 축약 된 형식으로도 작성할 수 있습니다.

예제
는 위의 애니메이션과 동일하지만 축약 형 애니메이션 속성을 사용합니다.

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

아래의 주요 주제를 살펴 보겠습니다. 요소를 좌우로 흔들리는 방법에 대해 이야기 합니다.
먼저 @keyframes 및 요소의 애니메이션 속성을 설정합니다.

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

코드 분석을 볼 수 있습니다. @keyframes 규칙을 설정하면 요소가 0 % -65 %에서 동작하지 않습니다. 즉, 70 % -100 %에서 시작
하여 6도 에서 스윙하는 회전 각도가 없습니다. 위이 배지와 같은 애니메이션을 설정합니다 . 다음과 같이 스타일 :

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

즉, @keyframes 규칙을 사용하여주기 동작을 완료하도록 애니메이션을 3 초로 설정하고 애니메이션이 0 초에서 시작하도록 설정하고 애니메이션이 무한 (무한) 재생되도록 지정합니다.
transform-origin : bottom을 설정하여 요소 회전 기준점을 하단 중심점으로 설정합니다. 기본값은 요소의 중심점입니다.

애니메이션 효과를 얻기위한 CSS3

추천