Firefox에서 작동하지 않는 경우 키프레임을 수정하는 3가지 방법

다음의 간단한 단계로 키프레임 애니메이션을 수정하십시오.

Firefox에서 keyframes 속성을 실험하는 사용자는 코드가 애니메이션 결과를 생성하지 않지만 Chrome에서는 작동한다고 보고했습니다. 이 문제에 대한 해결책을 찾으려면 계속 읽으십시오.

키프레임 애니메이션은 다양성 때문에 웹 개발자와 디자이너 사이에서 인기가 있습니다. CSS의 키프레임 규칙은 스타일 변경을 사용하여 CSS 애니메이션 시퀀스를 제어합니다. 에 대한 권장 사항을 확인하십시오. 키프레임과 CSS 애니메이션을 지원하는 최고의 브라우저.

CSS에서 키프레임 애니메이션은 어떻게 작동합니까?

키프레임은 CSS 스타일을 사용하여 애니메이션 요소를 추가합니다. 애니메이션은 백분율을 사용하여 시퀀스의 각 키프레임을 타이밍하여 구성됩니다. 키프레임은 위치, 불투명도 또는 오디오가 사용되는 시점을 나타냅니다.

애니메이션에서 변경 사항을 만들려면 모션을 만들기 위해 두 개 이상의 키프레임을 지정해야 합니다. 값에 대해 하나의 키프레임은 변경 시작 부분에, 다른 하나는 끝 부분에 배치되어야 합니다.

Firefox에서 작동하지 않는 키프레임을 어떻게 수정합니까?

1. 코드를 다시 확인

이것은 명백한 해결책처럼 보일 수 있지만 때로는 코드 어딘가에 여분의 공간과 같은 단순한 실수로 인해 문제가 발생할 수 있습니다. 철자 오류, 누락되거나 추가된 값, ​​추가 공백 등이 없는지 코드를 주의 깊게 살펴보십시오.

이 주제에 대해 자세히 알아보기

• Windows 10 및 11용 Firefox Enterprise 다운로드 및 설치
• Firefox 프로필을 로드할 수 없음 오류를 수정하는 3가지 방법
• Edge PDF Reader로 Firefox에서 다운로드한 PDF를 여는 방법
• 사용해 보기만 하면 되는 3가지 최고의 Firefox 동적 테마
• Firefox 77, 더 많은 사용자에게 더 나은 브라우저 성능 제공

2. 애니메이션 지속 시간 설정

animation-duration이 지정되지 않은 경우 keyframes 요소는 애니메이션을 재생하지 않습니다. 지속 시간을 설정하려면 animation-name과 동일한 섹션에 설정 값이 초인 animation-duration 규칙을 추가하십시오.

CSS 애니메이션의 연속 루프를 원하면 animation-iteration-count 규칙을 사용하십시오. 애니메이션이 순환할 횟수를 지정하거나 무한 값을 사용합니다.

3. 공급업체 접두사 제거

공급업체 접두사는 브라우저가 모든 브라우저에서 완전히 안정되기 전에 새로운 CSS 기능을 지원하도록 합니다. Cascading 키프레임은 이제 버전 14부터 Firefox에서 지원되므로 -모즈- 접두사.

위의 솔루션 중 하나가 Firefox에서 작동하지 않는 키프레임 문제를 해결하는 데 도움이 되었기를 바랍니다. 어떤 솔루션이 효과가 있었는지 또는 다른 솔루션에 대한 제안 사항이 있으면 의견을 통해 알려주십시오.