이전 연구를 통해 전환 속성을 사용하여 간단한 전환 애니메이션을 구현할 수 있지만 전환 애니메이션은 시작 및 종료 상태만 지정할 수 있으므로 전체 프로세스가 특정 기능에 의해 제어되므로 그다지 유연하지 않습니다. 이 섹션에서는 좀 더 복잡한 애니메이션인 애니메이션을 소개합니다.
애니메이션: 전환과 유사하게 일부 동적 효과를 얻을 수 있습니다. 차이점은 특정 속성이 변경되면 전환이 트리거되어야 하는 반면 애니메이션 효과는 동적 효과를 자동으로 트리거할 수 있다는 것입니다. 애니메이션 효과를 설정하려면 먼저 키프레임을 설정해야 합니다. 키프레임은 애니메이션 실행의 각 단계를 설정합니다. 키프레임 설정의 형식은 다음과 같습니다.
<style>/*애니메이션 키프레임 정의. 키프레임 이름은 test*/@keyframestest입니다.{/*from은 애니메이션의 시작 위치를 나타내며 0%로도 표현할 수 있습니다. */from{margin-left:0;}/*to는 애니메이션의 끝 위치를 나타내며, 100%로도 표현할 수 있습니다. */to{margin-left:100%;}}</style>CSS의 애니메이션은 플래시의 프레임별 애니메이션과 유사하며 섬세하고 매우 유연합니다. CSS의 애니메이션을 사용하면 많은 웹페이지에서 JavaScript로 구현된 동적 이미지, 플래시 애니메이션 또는 특수 효과를 대체할 수 있습니다.
애니메이션은 요소를 한 스타일에서 다른 스타일로 점진적으로 변경하는 효과입니다. 원하는 만큼 스타일을 원하는 만큼 변경할 수 있습니다(매우 공식적인 답변).
CSS3animation(애니메이션) 속성입니다.
@키프레임
@keyframes 규칙을 사용하면 애니메이션을 만들 수 있습니다.
애니메이션은 한 CSS 스타일 세트를 다른 CSS 스타일 세트로 점진적으로 변경하여 생성됩니다. 애니메이션 중에 이 CSS 스타일 세트를 여러 번 변경할 수 있습니다. 변경이 발생하는 시간을 백분율로 지정하거나 0% 및 100%에 해당하는 "from" 및 "to" 키워드를 통해 지정합니다.
0%는 애니메이션의 시작 시간이고, 100%는 애니메이션의 종료 시간입니다. 최상의 브라우저 지원을 위해 항상 0% 및 100% 선택자를 정의해야 합니다. 여기서 0%는 1프레임, 50%는 1프레임, 100%도 1프레임입니다.
마지막으로 애니메이션 속성을 사용하여 애니메이션의 모양을 제어하고 애니메이션을 선택기에 바인딩합니다.
애니메이션 이름이 필요합니다. 애니메이션의 이름을 정의합니다.
키프레임 선택기가 필요합니다. 애니메이션 지속 시간의 백분율에 대한 법적 값: 0~100%(0%와 같음)부터 (100%와 같음)
CSS 스타일이 필요합니다. 하나 이상의 합법적인 CSS 스타일 속성
예를 들어:
@keyframesname{0%{top:0px;left:0px;배경:red;}25%{top:0px;left:100px;배경:blue;}50%{top:100px;left:100px;배경:yellow; }75%{상단:100px;왼쪽:0px;배경:녹색;}100%{상단:0px;왼쪽:0px;배경:빨간색;}}1. animation-name 속성: 요소에 바인딩되어야 하는 애니메이션 이름을 설정합니다.
animation-name 속성은 애니메이션을 지정된 HTML 요소에 바인딩하는 데 사용됩니다. 속성의 선택적 값은 다음과 같습니다.
<!DOCTYPEhtml><html><head><style>@keyframesball{0%{top:0px;left:0px;}25%{top:0px;left:350px;}50%{top:200px;left:350px ;}75%{top:200px;left:0px;}100%{top:0px;left:0px;}}div{width:100px;height:100px;border-radius:50%;border:3pxsolidblack;position: 상대;애니메이션 이름:공;}</style></head><body><div></div></body></html>실행 결과:
참고: 애니메이션이 성공적으로 재생되려면 animation-duration 속성도 정의해야 합니다. 그렇지 않으면 animation-duration 속성의 기본값이 0이므로 애니메이션이 재생되지 않습니다.
2. animation-duration 속성: 애니메이션이 한 주기를 완료하는 데 걸리는 시간(초 또는 밀리초)을 정의합니다.
● 시간: 애니메이션이 완료되는 데 걸리는 시간을 지정합니다. 기본값은 0이며 애니메이션 효과가 없음을 의미합니다.
<!DOCTYPEhtml><html><head><style>@keyframesball{0%{top:0px;left:0px;}25%{top:0px;left:350px;}50%{top:200px;left:350px ;}75%{top:200px;left:0px;}100%{top:0px;left:0px;}}div{width:100px;height:100px;border-radius:50%;border:3pxsolidblack;position: 상대;애니메이션 이름:공;애니메이션 기간:2초;}</style></head><body><div></div></body></html>3. 애니메이션 타이밍 기능: 사용된 수학 함수는 3차 베지어 곡선 및 속도 곡선이라고 합니다. 이 기능을 사용하면 고유한 값을 사용하거나 미리 정의된 값 중 하나를 사용할 수 있습니다.
●선형: 애니메이션의 속도가 처음부터 끝까지 동일합니다.
●ease: 기본값. 애니메이션은 낮게 시작되었다가 속도가 빨라지고, 끝나기 전에 느려집니다.
●ease-in: 애니메이션이 느린 속도로 시작됩니다.
●ease-out: 애니메이션이 느린 속도로 종료됩니다.
●ease-in-out: 애니메이션이 느린 속도로 시작하고 끝납니다.
●cubic-bezier(n,n,n,n): 큐빅-베지어() 함수를 사용하여 애니메이션의 재생 속도를 정의합니다. 매개변수의 값 범위는 0에서 1 사이의 값입니다.
4. animation-delay 속성: 애니메이션이 시작되는 시점을 정의합니다.
●시간: 선택 사항입니다. 애니메이션이 시작되기 전에 기다리는 시간을 초 또는 밀리초 단위로 정의합니다. 기본값은 0입니다.
참고: 단위는 초(s) 또는 밀리초(ms)일 수 있습니다.
5. animation-iteration-count 속성: 애니메이션을 재생해야 하는 횟수를 정의합니다.
속성의 선택적 값은 다음과 같습니다.
6. animation-direction 속성: 애니메이션을 반복해서 역방향으로 재생할지 여부를 정의합니다.
●보통: 기본값입니다. 애니메이션이 정상적으로 재생됩니다.
●reverse: 애니메이션이 역방향으로 재생됩니다.
●대체: 애니메이션이 홀수(1, 2, 5...)로 정방향으로 재생되고 짝수(2, 4, 6...)로 역방향으로 재생됩니다.
●alternate-reverse: 홀수번째(1, 3, 5...)에는 역방향으로, 짝수번째(2, 4, 6...)에는 정방향으로 애니메이션이 재생됩니다.
7. animation-fill-mode 속성: 애니메이션이 재생되지 않을 때(애니메이션이 완료되거나 애니메이션이 재생되기 전에 지연이 있는 경우) 요소에 적용할 스타일을 지정합니다.
참고: 기본적으로 CSS 애니메이션은 첫 번째 키프레임이 재생될 때까지 요소에 영향을 주지 않으며 마지막 키프레임이 완료된 후에는 요소에 영향을 주지 않습니다. animation-fill-mode 속성은 이 동작을 재정의합니다.
●없음 기본값입니다. : 애니메이션은 애니메이션 실행 전후에 대상 요소에 어떤 스타일도 적용하지 않습니다.
●forwards: 애니메이션이 끝난 후(animation-iteration-count에 의해 결정됨) 애니메이션이 이 속성 값을 적용합니다.
●backwards: 애니메이션 지연 정의 중 애니메이션의 첫 번째 반복을 시작한 키프레임에 정의된 속성 값을 애니메이션에 적용합니다. 이는 from 키프레임(애니메이션 방향이 "normal" 또는 "alternate"인 경우) 또는 to 키프레임(애니메이션 방향이 "reverse" 또는 "alternate-reverse"인 경우)의 값입니다.
●두 애니메이션 모두 앞으로, 뒤로의 규칙을 따릅니다. 즉, 애니메이션은 애니메이션 속성을 양방향으로 확장합니다.
8.animation-play-state: 애니메이션이 실행 중인지 일시 중지되었는지 지정합니다.
●paused: 애니메이션을 일시 중지하도록 지정합니다.
●running: 달리는 애니메이션을 지정합니다.
9. 초기: 속성을 기본값으로 설정합니다.
●initial: 키워드는 CSS 속성을 기본값으로 설정하는 데 사용됩니다.
●initial: 키워드는 모든 HTML 요소의 모든 CSS 속성에 사용할 수 있습니다.
10. 상속: 상위 요소로부터 속성을 상속받습니다.
●inherit: 키워드는 속성이 상위 요소로부터 해당 값을 상속해야 함을 지정합니다.
●inherit: 키워드는 모든 HTML 요소의 모든 CSS 속성에 사용할 수 있습니다.
생기
animation 속성은 animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count, animation-direction, animation-fill-mode, animation-play-state의 약어입니다. 속성은 위 속성 중 여러 개를 동시에 정의할 수 있습니다. 구문 형식은 다음과 같습니다.
애니메이션:애니메이션 이름애니메이션 기간애니메이션-타이밍 기능애니메이션-지연애니메이션-반복-카운트애니메이션-방향애니메이션-채우기 모드애니메이션-재생 상태;
각 매개변수는 위에서 소개한 각 속성에 해당합니다. 하나 이상의 값이 생략되면 해당 속성에 해당하는 기본값이 사용됩니다.
<!DOCTYPEhtml><html><head><metacharset=UTF-8><title>애니메이션</title><style>.box1{width:700px;height:500px; background-color:silver;}.box2{width :100px;높이:100px;배경 색상:#bfa;여백-왼쪽:10px;/*애니메이션 이름:테스트;*//*애니메이션 기간:4초;*//*애니메이션 타이밍 기능:선형; *//*animation-iteration-count:4;*//*animation-direction:alternate;*//*animation-fill-mode:backwards;*//*animation-delay:2s;*/animation:test2slinear1s4alternate; }/*애니메이션 키프레임을 정의합니다. 키프레임 이름은 test*/@keyframestest입니다.{/*from은 애니메이션의 시작 위치를 나타내며 0%로도 표현할 수 있습니다. */from{margin-left:50px; background-color:orange;}/*to는 애니메이션의 끝 위치를 나타내며, 100%로도 표현할 수 있습니다. */to{margin-left:600px; background-color:yellow;}}/*애니메이션 실행 제어*//*.box1:hover.box2{animation-play-state:paused;}*/</style > </head><body><div><div></div></div></body></html>