Ga naar inhoud
TextArray1.87.0
100% lokaal

CSS-keyframes-generator

Zet percent;property:value-stappen om in een @keyframes-blok en de bijbehorende animatieverkorting.

Invoer
Uitvoer
Gerelateerde tools
CSS-gradiëntgeneratorOntwikkelaarstools
CSS box-shadow-generatorOntwikkelaarstools
CSS grid generatorOntwikkelaarstools
i18n sleutel diffOntwikkelaarstools
TOML naar JSON-converterOntwikkelaarstools
SQL naar JSONOntwikkelaarstools
CSS-keyframes-generator
Voer keyframe-stappen in als percent;property:value — één regel per stop, zoals 0;opacity:0 gevolgd door 100;opacity:1 — en deze tool stelt een compleet @keyframes-blok samen met de bijbehorende animatieverkorting-declaratie. Voeg meerdere property:value-paren op dezelfde regel toe, gescheiden door puntkomma's, om meer dan één eigenschap op die stop te animeren, en gebruik een percentage op meerdere regels om eigenschappen toe te voegen.
Kies een voorinstelling — fade, schuif, pols, schudden of stuiteren — om stappen handmatig over te slaan en een kant-en-klare animatie te krijgen met alle nog aanpasbare opties, of verander de voorinstelling in aangepast om elke stop vanuit uw eigen invoer aan te sturen. De resterende opties bepalen de animatieverkorting: naam stelt de identificatie in die door de @keyframes-regel en de animatie-declaratie wordt gedeeld, duur en vertraging zijn in seconden, en de timing-functie dekt alle standaardsleutelwoorden plus een aangepaste cubic-bezier()-curve voor een exact easing-vorm. Stel de animatie in om een vaste aantal keer te herhalen of zet oneindig aan, kies een richting (normaal, omgekeerd, afwisselend, afwisselend omgekeerd) en een vulmodus voor wat er voor en na afspelen gebeurt, en zet de webkit-voorvoegsel-optie aan om ook een @-webkit-keyframes-blok en een -webkit-animation-regel voor oudere Safari- en Android-WebView-versies uit te voeren.
Percentagewaarden buiten 0–100 worden in het bereik geklemd, "from" en "to" worden geaccepteerd als aliassen voor 0 en 100, en lege of verkeerd geformatteerde regels worden overgeslagen in plaats van de uitvoer te verstoren. De teller onder de uitvoer rapporteert hoeveel keyframe-stops zijn gegenereerd en het exacte aantal tekens.
Alles loopt lokaal in uw browser terwijl u typt — geen CSS- of animatiegegevens worden ooit naar een server verzonden. Kopieer het resultaat, download het als een .txt-bestand, of stuur de uitvoer terug naar de invoer om de stappen verder aan te passen.
FAQ
Hoe ziet het invoerformat er eigenlijk uit?
Één regel per keyframe-stop: een percentage, een puntkomma, vervolgens property:value. Voeg op dezelfde regel meer property:value-paren toe, elk gescheiden door een puntkomma, om meerdere eigenschappen tegelijk te animeren — bijvoorbeeld 50;opacity:0.5;transform:scale(1.1).
Wat gebeurt er als ik een voorinstelling kies zoals fade of bounce?
Het gereedschap gebruikt een ingebouwde reeks keyframe-stappen voor die voorinstelling en negeert wat er in het invoervak staat, terwijl alle andere opties — naam, duur, timing, richting enzovoort — nog steeds van toepassing zijn. Schakel over naar aangepast om uw eigen invoer opnieuw te gebruiken.
Hoe krijg ik een exact aangepaste easing-curve?
Stel de timing-functie in op aangepast en voer vier kommagescheiden getallen in het cubic-bezier-veld in, zoals 0.25, 0.1, 0.25, 1. Een ongeldige waarde valt terug op ease in plaats van ongeldig CSS te produceren.
Wat is het verschil tussen iteratieaantal en oneindig?
Iteratieaantal bepaalt hoe vaak de animatie wordt afgespeeld voordat deze stopt. Oneindig inschakelen overschrijft dit en herhaalt de animatie oneindig.
Worden mijn animatiegegevens ergens geüpload?
Nee. Het @keyframes-blok en de animatieverkorting worden volledig in uw browser gegenereerd — niets wat u typt verlaat ooit uw apparaat.