3 måder at rette keyframes på, hvis det ikke virker i Firefox

Ret din keyframe-animation med disse nemme trin

Brugere, der eksperimenterer med egenskaben keyframes i Firefox, har rapporteret, at deres kode ikke giver animationsresultater, men fungerer i Chrome. Fortsæt med at læse for at finde løsningen på dette problem.

Keyframe-animationer er populære blandt webudviklere og designere på grund af deres alsidighed. Keyframes-reglen i CSS styrer en CSS-animationssekvens ved hjælp af skiftende stilarter. Tjek vores anbefalinger til bedste browsere, der understøtter keyframes og CSS-animationer.

Hvordan fungerer keyframe-animation i CSS?

Keyframes tilføjer et animationselement ved hjælp af CSS-stile. Animationen konfigureres ved at time hvert keyframe i en sekvens ved hjælp af procenter. Et keyframe angiver det tidspunkt, hvor en position, opacitet eller lyd bruges.

For at skabe en ændring i animationen skal der angives mindst to keyframes for at skabe bevægelse. Én keyframe skal placeres for værdien i begyndelsen af ​​ændringen og én i slutningen.

Hvordan retter jeg keyframes, hvis de ikke virker i Firefox?

1. Dobbelttjek koden

Dette kan virke som en indlysende løsning, men nogle gange kan der opstå et problem fra en fejl så simpel som et ekstra mellemrum et sted i koden. Se omhyggeligt igennem koden for at sikre, at der ikke er stavefejl, manglende eller tilføjede værdier, ekstra mellemrum osv.

Læs mere om dette emne

• Download og installer Firefox Enterprise til Windows 10 og 11
• 3 måder at ordne din Firefox-profil kan ikke indlæses Fejl
• Sådan åbner du Firefoxs downloadede PDF'er med Edge PDF Reader
• 3 bedste Firefox dynamiske temaer, du bare skal prøve
• Firefox 77 tilbyder bedre browserydeevne til flere brugere

2. Indstil animationens varighed

Hvis der ikke er angivet nogen animationsvarighed, afspiller keyframes-elementet ikke animationen. For at angive en varighed skal du tilføje en animations-varighedsregel med en indstillet værdi på sekunder i samme sektion som animationsnavn.

Hvis du ønsker en kontinuerlig løkke af CSS-animationen, skal du bruge reglen for animation-iteration-count. Angiv enten det antal gange, du vil have animationen til at cykle, eller brug en uendelig værdi.

3. Fjern leverandørpræfikser

Leverandørpræfikser gør det, så en browser understøtter nye CSS-funktioner, før de er fuldt stabile på tværs af alle browsere. Fordi Cascading keyframes nu er understøttet på Firefox siden version 14, er der ingen grund til at have -moz- præfiks.

Forhåbentlig hjalp en af ​​ovenstående løsninger med at løse problemet med keyframes, der ikke fungerer i Firefox. Fortæl os i kommentarerne, hvilken løsning der virkede for dig, eller hvis du har et forslag til en anden løsning.