@keyframes를 사용하여 CSS3에서 애니메이션 만들기(예제 설명)

애니메이션 속성은 크기, 수량, 백분율, 색상과 같은 한 값에서 다른 값으로 점진적으로 변경될 수 있습니다. @keyframes를 사용하면 하나의 CSS 스타일 설정을 다른 CSS 스타일 설정으로 점진적으로 변경하여 애니메이션을 만들 수 있습니다. 애니메이션은 업무에서도 많이 사용됩니다. 다음으로 애니메이션 활용법을 소개하겠습니다.

1. @keyframes 구문 규칙
애니메이션 프로세스 중에 CSS 스타일이 여러 번 변경될 수 있습니다. % 또는 0% ~ 100%와 동일한 키워드 "from" 및 "to"를 사용하여 변경이 발생하는 시기를 지정합니다. 0%는 애니메이션이 시작되는 시점이고, 100%는 애니메이션이 종료되는 시점입니다. 최상의 브라우저 지원을 위해 선택기는 항상 0%와 100%로 정의되어야 합니다.

@keyframes는 여러 변형으로 구성된 그룹으로 이해될 수 있는 애니메이션입니다.
구문:
@keyframes 애니메이션 이름 {
from{ css1}
to{ css2 }
}

@keyframes 애니메이션 이름 {
0% {css1}
50% {css2}
100% {css3}
}
참고 : animation 속성을 사용하여 애니메이션의 모양을 제어하고, 선택기를 사용하여 애니메이션을 바인딩합니다.

2. 애니메이션 속성 값

이 애니메이션을 호출할 때 애니메이션을 사용하세요. 애니메이션은 6가지 속성으로 구성됩니다.

animation-name은 선택기에 바인딩될 키프레임의 이름을 지정합니다.
animation-duration은 애니메이션에 걸리는 시간을 지정합니다. 또는 밀리초 단위로 완료
animation-timing-function은 애니메이션이 사이클을 완료하는 방법을 설정합니다.
animation-delay는 애니메이션이 시작되기 전 지연 간격을 설정합니다.
animation-iteration-count는 애니메이션이 재생되는 횟수를 정의합니다.
animation-direction은 지정합니다. 역순으로 재생해야 하는지 여부 애니메이션
애니메이션: 애니메이션 이름 시간 속도 곡선이 시작되면 지연된 재생 횟수가 역순으로 재생됩니다.
예:

사각형을 왼쪽 상단에서 으로 이동시킵니다. 오른쪽 상단, 오른쪽 하단, 왼쪽 하단, 마지막으로 왼쪽 상단으로 돌아가면 그에 따라 색상도 변경됩니다

div{animation:mymove 5s infinite;
 -webkit-animation:mymove 5s infinite; /* Safari and Chrome */
}
@keyframes mymove
{
 0%   {top:0px; left:0px; background:red;}
 25%  {top:0px; left:100px; background:blue;}
 50%  {top:100px; left:100px; background:yellow;}
 75%  {top:100px; left:0px; background:green;}
 100% {top:0px; left:0px; background:red;}
}
@-webkit-keyframes mymove /* Safari and Chrome */
{
 0%   {top:0px; left:0px; background:red;}
 25%  {top:0px; left:100px; background:blue;}
 50%  {top:100px; left:100px; background:yellow;}
 75%  {top:100px; left:0px; background:green;}
 100% {top:0px; left:0px; background:red;}
}

위 내용에서는 애니메이션 사용 방법을 소개합니다. 직접 해보고, 더 많이 두드리고, 다양한 효과를 시도해 보세요!

위 내용은 @keyframes를 사용하여 CSS3에서 애니메이션 만들기(예제 설명)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!