css3 @keyframes 애니메이션 규칙 학습

CSS3에서 애니메이션을 만들려면 @keyframes 규칙을 배워야 합니다.
@keyframes 규칙은 애니메이션을 만드는 데 사용됩니다.@keyframes에서 어떤 CSS 스타일을 규정하면 현재 스타일에서 새로운 스타일로 바꾸는 애니메이션 효과를 만들 수 있습니다.
인스턴스

@keyframes myfirst
{
from {background: red;}
to {background: yellow;}
}

@-moz-keyframes myfirst /* Firefox */
{
from {background: red;}
to {background: yellow;}
}

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

@-o-keyframes myfirst /* Opera */
{
from {background: red;}
to {background: yellow;}
}

@keyframes에서 애니메이션을 만들 때 선택기에 묶어 주십시오. 그렇지 않으면 애니메이션 효과가 나타나지 않습니다.
다음 두 개 이상의 CS3 애니메이션 속성을 지정하여 애니메이션을 선택기에 바인딩할 수 있습니다.
애니메이션 이름 지정
규정 애니메이션 시간
인스턴스
myfirst 애니메이션을 div 요소에 묶는 시간: 5초:

div
{
animation: myfirst 5s;
-moz-animation: myfirst 5s;	/* Firefox */
-webkit-animation: myfirst 5s;	/* Safari   Chrome */
-o-animation: myfirst 5s;	/* Opera */
}

CSS3 애니메이션이란?
애니메이션은 요소를 한 스타일에서 다른 스타일로 변경하는 효과입니다.
스타일의 횟수를 변경할 수 있습니다.
변화가 발생하는 시간을 백분율로 정하거나 키워드'from'과'to'를 사용하면 0%와 100%와 같습니다.
0%는 애니메이션의 시작이고 100%는 애니메이션의 완성입니다.
최상의 브라우저 지원을 받기 위해서는 항상 0%와 100% 선택기를 정의해야 합니다.

@keyframes myfirst
{
0%   {background: red;}
25%  {background: yellow;}
50%  {background: blue;}
100% {background: green;}
}

@-moz-keyframes myfirst /* Firefox */
{
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;}
}

@-o-keyframes myfirst /* Opera */
{
0%   {background: red;}
25%  {background: yellow;}
50%  {background: blue;}
100% {background: green;}
}

CSS 3 애니메이션 속성
다음 표에는 @keyframes 규칙과 모든 애니메이션 속성이 나열되어 있습니다.
등록 정보
묘사
CSS
@keyframes
규정 애니메이션.
3
animation
animation-play-state 속성을 제외한 모든 애니메이션 속성의 약자 속성입니다.
3
animation-name
@keyframes 애니메이션의 이름을 지정합니다.
3
animation-duration
애니메이션이 한 주기를 완성하는 데 걸리는 초나 밀리초를 규정합니다.기본값은 0입니다.
3
animation-timing-function
애니메이션의 속도 곡선을 지정합니다.기본값은 ease입니다.
3
animation-delay
애니메이션을 시작할 시기를 지정합니다.기본값은 0입니다.
3
animation-iteration-count
애니메이션이 재생되는 횟수를 지정합니다.기본값은 1입니다.
3
animation-direction
다음 주기에 애니메이션을 역방향으로 재생할지 여부를 지정합니다.기본값은 "normal"입니다.
3
animation-play-state
애니메이션이 실행 중이거나 일시 중지되었는지 여부를 지정합니다.기본값은 "running"입니다.
3
animation-fill-mode
개체의 애니메이션 시간 이외의 상태를 지정합니다.
3

animation

 
  
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;
/* Firefox: */
-moz-animation-name: myfirst;
-moz-animation-duration: 5s;
-moz-animation-timing-function: linear;
-moz-animation-delay: 2s;
-moz-animation-iteration-count: infinite;
-moz-animation-direction: alternate;
-moz-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;
/* Opera: */
-o-animation-name: myfirst;
-o-animation-duration: 5s;
-o-animation-timing-function: linear;
-o-animation-delay: 2s;
-o-animation-iteration-count: infinite;
-o-animation-direction: alternate;
-o-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;
/* Opera: */
-o-animation: myfirst 5s linear 2s infinite alternate;
}