Syntax för @keyframes och animationsegenskapen

Med CSS-animationer kan ni ändra egenskaper i flera steg över tid med hjälp av @keyframes. Till skillnad från övergångar startar animationer automatiskt eller när en klass läggs till, och de stöder komplexa sekvenser.

Definiera animationssteg med procentvärden (0 % till 100 %) eller nyckelorden from/to:

Tillämpa en animation på ett element med kortformen animation eller dess underordnade egenskaper:

Refererar till regeln @keyframes med namn:

Anger hur lång tid en animationscykel tar:

Använd keyframes i procent för komplexa animationer med flera steg:

Varje keyframe-steg kan animera flera egenskaper samtidigt:

Timingfunktionen kan anges för varje keyframe-steg och styr då utjämningen mellan enskilda hållpunkter i stället för för hela animationen.

Tillämpa flera animationer på ett element med kommaseparerade värden:

Pausa och återuppta animationer dynamiskt:

Välj med omsorg:

• Transition: två tillstånd, utlöses av en tillståndsändring och är enkel
• Animation: flera steg, startar själv, kan upprepas och ger större kontroll

Definiera animationssteg med @keyframes genom att använda from/to eller procentbaserade hållpunkter. Tillämpa dem med kortformen animation genom att ange namn, varaktighet, timing och fyllnadsläge. Flera animationer separeras med kommatecken. Använd övergångar för enkla ändringar mellan två tillstånd och animationer för komplexa sekvenser.