CSS 애니메이션 필드 모드 속성 이해

코어 포인트

CSS

속성은 애니메이션 실행 전후에 스타일이 적용되는 방법을 제어합니다.

• 값은 애니메이션이 완료된 후 애니메이션의 마지막 키 프레임에 정의 된 스타일이 원래 스타일로 복원되지 않고 요소에 남아 있는지 확인합니다. animation-fill-mode 값은 애니메이션이 시작되기 전에 지연되는 동안 첫 번째 키 프레임의 스타일을 요소에 적용합니다. none forwards 값은 애니메이션이 시작되기 전에 첫 번째 키 프레임의 스타일을 적용하고 애니메이션이 끝난 후 마지막 키 프레임의 스타일을 유지하는 backwards both value를 결합합니다.
• 거의 모든 프론트 엔드 개발자는 CSS 키 프레임 기반 애니메이션을 사용했습니다. 어떤 사람들은이 기능으로 다소 복잡한 데모와 실험을 만들 수도 있습니다. forwards 주제에 대한 전체 소개가 필요한 경우 2011 년 Smashing Magazine에 대한 저의 게시물은 여전히 ​​좋은 선택입니다. 그러나이 기사에서는 CSS 애니메이션 사양의 하나의 구성 요소 인
속성에 중점을두고 싶습니다.
• 이것은 이해하기 쉽지 않은 유일한 애니메이션 기반 속성입니다. 예를 들어, 아무도 backwards,
등에 대해 혼란 스러울 수는 없지만 "채우기 모드"는 정확히 무엇을 의미합니까? 간단히 생각하고 몇 가지 예를 들어 봅시다.
• both forwards 문법 backwards
기본 키 프레임 애니메이션이

규칙을 사용하여 정의된다는 것을 이미 알고있을 수 있습니다. 그러나 키 프레임을 애니메이션 이름과 연결하지 않으면 키 프레임이 작동하지 않습니다. 이것은 약식 애니메이션 속성 선언입니다. 내가 의미하는 바를 이해할 수 있습니다 : .

물론,이 같은 선의 약어는 다음으로 확장 될 수 있습니다 :

두 예 모두에서 속성은 마지막으로 정의되며 두 경우 모두 값은 ""로 설정됩니다. 우리는 결국 그것을 정의 할 필요는 없지만 이것은 좋은 관행 일 수 있습니다.

마찬가지로, CSS 애니메이션을 사용한 적이 없더라도 위의 진술의 모든 것이 를 제외하고 무엇을하는지 알아낼 수 있습니다. animation-fill-mode

의 규범 적 정의 그렇다면 사양은이 속성에 대해 어떻게 말합니까? animation-name animation-duration

속성은 애니메이션 실행 시간 외부에 적용되는 값을 정의합니다. 는 계속 설명 할 수 있듯이 "외부 실행 시간"은 구체적으로 애니메이션이 요소에 적용되는 시간과 요소가 실제로 애니메이션으로 시작하는 시간 사이의 시간을 의미합니다. 기본적으로 값을 사용하면 애니메이션 요소가 애니메이션 실행 시간 외부에서 어떻게 보이는지 정의 할 수 있지만 애니메이션이 적용된 후에는 정의 할 수 있습니다. 혼란 스러울 수 있지만 곧 내가 의미하는 바를 이해할 것입니다.

가능한 각 가능한 값 (여전히 약간 혼란 스러울 수 있음)을 보면서이 기본 정의를 확장하겠습니다. fill-mode

분해 값

속성은 네 가지 값 중 하나를 수용 할 수 있습니다. 다음은 각 값의 고장입니다. 이것은

의 초기 또는 기본값입니다. JavaScript를 통해 다른 값에서 변경하거나 계단식에서 무언가를 덮어 쓰지 않는 한

값을 정의하면 중복됩니다. animation-fill-mode 값이 무엇을하는지 이해하려면 여기에 none가없는 애니메이션을 보여주는 코드 펜 데모가 있습니다 (값은 ) : forwards. [Codepen Demo Link (실제 링크로 교체하십시오)] backwards 대부분의 경우 대부분의 경우 both의 채우기 모드가 원하는 것이 아니라는 것을 알 수 있습니다. 는 요소가 애니메이션 실행 시간 외부에서 어떻게 보이는지 정의합니다.

이 예에서 공은 처음에는 빨간색이며 오른쪽으로 이동하는 동안 점차 분홍색으로 변하고 동시에 크기가 변경됩니다. 공이 작고 분홍색으로 남아 있고 애니메이션이 끝난 직후에 더 좋을 것입니다. 이렇게하면 애니메이션이 끝난 후 추악한 점이 시작 상태로 돌아갑니다.

none 볼의 애니메이션을 ":

[Codepen Demo Link (실제 링크로 교체하십시오)] animation-fill-mode 이제 를 사용하는 이점과 none 값이 다른 값보다 더 많이 사용되는 이유를 알 수 있습니다. 이 값으로 정의 할 때 브라우저에 애니메이션 요소가 마지막 키 프레임에 정의 된대로 최종 스타일 세트를 유지하기를 원한다고 말합니다. 이런 식으로, 우리는 애니메이션이 끝난 후 요소가 애니메이션을 시작하기 전에 초기 상태로 돌아 가지 않습니다 (데모에 추가 한 "재설정"버튼이 우리를 위해이를 수행 할 수 있습니다).

값을 none로 바꾸자 - 지금 무슨 일이 일어 났습니까? animation-fill-mode [Codepen Demo Link (실제 링크로 교체하십시오)] none 이 데모의 동작은 ""의 값을 가진 첫 번째 데모와 정확히 동일하다는 점에 유의하십시오. 왜 이런 일이 일어나고 있습니까?

와 달리,

값은 애니메이션이 끝나면 애니메이션이 시작되기 전에 요소의 스타일을 제공합니다. 이것은

값에 대한 사양의 설명을 볼 때 더 의미가 있습니다.

에 의해 정의 된 기간 동안 애니메이션은 애니메이션의 첫 번째 반복이 시작되는 키 프레임에 정의 된 속성 값을 적용합니다. 이들은 animation-delay from 이를 보여주기 위해 시연을 두 번 수정했습니다. to

는 볼에 다른 색상을 사용하기 위해 키 프레임을 추가했습니다.

속성을 ​​사용하여 지연이 추가되었습니다.

<:> 여기 있습니다 : [Codepen Demo Link (실제 링크로 교체하십시오)]
• 이제 "애니메이션 시작"버튼을 누르면 볼이 파란색으로 변하는 것을 볼 수 있습니다. 이것은 명백한 지연 때문입니다. 기술적으로 각 애니메이션은 기본 지연이 있지만 지연은 0 이므로이 경우 애니메이션이 시작되기 전에 초기 키 프레임의 스타일이 스타일이 동일하다면 from의 값을 실제로 볼 수 없습니다. 그리고 당신은 확실히 그것을 보지 못할 것입니다. 동일한 스타일과 동일한 지연을 사용하는 경우
값을 삭제하면 애니메이션이 시작되기 전에 볼이 빨간색으로 유지됩니다.
• 솔직히 말해서, 나는 실제로 animation-delay 값을 많이 보지 못했습니다. 너무 많은 경우 애니메이션의 첫 번째 키 프레임의 스타일이 요소 애니메이션 이전의 정적 상태와 다르다는 것을 상상하기는 어렵습니다. 그러나 아이디어가 있다면 일부 사용 사례를 듣고 싶습니다.

우리가 볼 마지막 값은

값입니다. 이 값은 브라우저에 및 의 효과를 적용하도록 지시합니다.

데모에서 같은 스타일을 유지하고

값에 할당 할 때 어떤 일이 발생하는지 보자. [Codepen Demo Link (실제 링크로 교체하십시오)] backwards 로켓 과학이 아닙니다. 보시다시피, 초기 지연 중에 초기 키 프레임 스타일이 적용되고 애니메이션이 끝나고 마지막 키 프레임의 스타일이 동결됩니다 (앞에서 언급 한 바와 같이, 이것은 일반적으로 원하는 것입니다). 다시 말하지만,이 값은 지연이 아니고 첫 번째 키 프레임에 정의 된 대체 색상이 아닌 경우 backwards를 사용하는 것과 크게 다르지 않습니다.

몇 가지 예방 조치와 팁 backwards

위의 내용과 사양의 일부 세부 사항을 기반으로 다음은 주목해야 할 사항입니다.

• 및 backwards 값의 중요성을 다소 최소화했지만 이러한 값은 스크립트 또는 사용자 입력에 의해 제어되는 복잡한 애니메이션에서 유용 할 수 있습니다. 사용 사례는 (생각 : 게임), 실험과 혁신을 통해서만 가능합니다. both 속성이
로 설정되면 및 내가 animation-direction라고 말하면서 4 가지 값만 받아 들여지는 동안 CSS 범위 속성 값도 사용할 수 있습니다. reverse 이전 버전의 사양에서 forwards는 약어 애니메이션 속성의 일부가 아니었지만 키 프레임을 지원하는 모든 브라우저는이를 약어에 사용할 수있는 것으로 보입니다. backwards 애니메이션 약어를 사용하고 애니메이션의 사용자 정의 이름을 선택할 때 유효한 "또는 " 값이라고 가정하면 약어 선언.
• animation-fill-mode 결론
• 이 요약 이이 속성을 더 잘 이해하는 데 도움이되기를 바랍니다. 일부 연구는 실제로 그것을 더 잘 이해하는 데 도움이되었습니다. animation-fill-mode에 대해 고유 한 작업을 수행했거나 다른 값에 대한 고유 한 사용 사례가 있거나이 기사에 대한 수정 사항이 있으시면 토론에서 알려주십시오.
CSS 애니메이션에 대한 FAQS A Animation Fill Mode 속성
• CSS fill-mode 속성의 의미는 무엇입니까? reverse CSS forwards 속성은 CSS 애니메이션의 주요 측면입니다. 애니메이션이 실행 전후의 대상에 스타일을 적용하는 방법을 정의합니다. 이 속성은 애니메이션 중에 중간 요소 상태를 제어하는 ​​데 도움이됩니다. , , fill-mode 및 의 네 값을 취할 수 있습니다. 각 값은 애니메이션이 다른 단계에서 요소에 어떤 영향을 미치는지 결정하므로 개발자에게 애니메이션을 더 잘 제어 할 수 있습니다.

의

값은 어떻게 작동합니까? 속성의 css 값은 애니메이션 프로세스 중에 발생하는 마지막 키 프레임에 대해 요소가 계산 된 값 세트를 유지하도록합니다. 즉, 애니메이션이 끝나면 마지막 키 프레임에 정의 된 스타일이 원래 스타일로 복원되지 않고 요소에 남아 있습니다.

의 값을 설명 할 수 있습니까?

css animation-fill-mode value

속성의 값은 애니메이션이 시작되기 전 기간 동안 첫 번째 키 프레임의 스타일을 요소에 적용합니다. 즉, 애니메이션이 시작되기 전에 지연이 있으면 해당 지연 중 첫 번째 키 프레임에 정의 된 스타일이 표시됩니다.

의 값은 무엇을 의미합니까?

animation-fill-mode css 속성의 both 값은

와 의 효과를 결합합니다. 이는 애니메이션이 시작되기 전에 첫 번째 키 프레임의 스타일을 적용하고 애니메이션이 끝난 후 마지막 키 프레임의 스타일을 유지하는 것을 의미합니다. animation-fill-mode 속성이 로 설정되면 어떻게됩니까? both CSS forwards 속성이 로 설정되면 애니메이션은 시작 전후에 요소에 어떤 스타일도 적용되지 않습니다. 요소는 애니메이션을 활성화하는 동안 애니메이션에 의해서만 영향을받습니다. backwards 속성에 여러 값을 사용할 수 있습니까?

아니요, CSS

속성은 한 번에 하나의 값만 가져갈 수 있습니다. 애니메이션의 특정 요구 사항에 따라 , animation-fill-mode, none 또는

를 선택할 수 있습니다.

모든 브라우저가 animation-fill-mode 속성을 ​​지원합니까? none CSS

속성은 Chrome, Firefox, Safari 및 Edge를 포함한 모든 최신 브라우저에서 널리 지원됩니다. 그러나 인터넷 익스플로러에서는 지원되지 않습니다.

속성은 animation-fill-mode 속성과 어떻게 상호 작용합니까?

css

속성은 속성과 함께 작동합니다. animation-fill-mode가 none로 설정되고 forwards가 존재하는 경우, 첫 번째 키 프레임의 스타일은 지연 중에 적용됩니다. backwards 속성은 백분율 값의 키 프레임과 함께 사용할 수 있습니까? both 예, CSS

속성은 백분율 값의 키 프레임과 함께 사용할 수 있습니다. 값은 각각 키 프레임의 가장 가까운 0% 및 100%의 스타일을 적용합니다. animation-fill-mode 속성의 기본값은 얼마입니까?

css 속성의 기본값은 animation-fill-mode입니다. 이는 기본적으로 애니메이션이 시작 전후에 요소에 어떤 스타일도 적용하지 않음을 의미합니다.

코드 펜 링크를 자리 표시 자로 교체했습니다. 기사를 완성하려면 실제 Codepen 데모 링크를 제공해야합니다.

위 내용은 CSS 애니메이션 필드 모드 속성 이해의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!