Het verschil tussen een interface die goedkoop aanvoelt en een interface die overwogen aanvoelt, is meestal een vijfde van een seconde. Een knop die in de zweefkleur klikt zodra je aanwijzer hem aanraakt, leest als abrupt; dezelfde knop die gedurende tweehonderd milliseconden naar die kleur wordt versoepeld, luidt als voltooid. Die versoepeling is een CSS-overgang, en voor zoiets kleins is het opmerkelijk hoe vaak ik het verkeerd heb zien doen, de zweefstatus heb opgezet in plaats van de basisstatus, met vallen en opstaan afgestemd op een tiental verfrissingen, of toegepast op een eigenschap die helemaal niet kan animeren.
Een overgang is de browser' s manier om de verandering tussen twee waarden van een eigenschap in de loop van de tijd te animeren, in plaats van direct te schakelen Het is het werkpaard achter zweveneffecten, focustoestanden, uitdijende panelen en omgeschakelde klassen, en het is bijna altijd het eerste stukje beweging dat iemand aan een project toevoegt Maar de steno propt vier waarden in een lijn in een vaste volgorde, de timingfunctie is het deel dat bepaalt hoe de beweging voelt, en er is een bekende klif mensen vallen af als ze proberen iets te vervagen van display: none. Het bouwen van de overgang waar je het kunt zien spelen, bespaart dat allemaal.
de CSS Transition Generator hiermee kunt u een eigenschap kiezen, de duur en vertraging in milliseconden instellen en een timingfunctie kiezen uit de CSS-trefwoorden en een set samengestelde kubieke-bezier-curven U kunt verschillende overgangen in één steno stapelen, en een triggerknop speelt de beweging af op een live preview-element, zodat u de versoepeling voelt voordat u zich eraan verbindt. De exacte aangifte bevindt zich in een kopieerklaar vak hieronder.
tl;dr: Een CSS-overgang animeert de verandering tussen twee waarden van een eigenschap over een ingestelde duur Het hoort thuis in de basisstatus, niet in de hover-status, dus het element versoepelt in beide richtingen De verkorte volgorde is eigenschap, duur, timing-functie, vertraging Je kunt niet overgaan
display, omdat het geen tussenwaarden heeft, en je zou de voorkeur moeten geven aan animerentransformenopacityvoor soepele prestaties Deze generator stelt elk onderdeel bloot met een live hover preview, ondersteunt meerdere lagen en zendt schone CSS uit. Het draait volledig in uw browser zonder aanmelding.
Welk probleem lost een CSS-overgangsgenerator op?
Het moeilijkste deel van een overgang is niet de syntaxis; het is dat je beweging niet kunt beoordelen door het te lezen. transition: transform 400ms cubic-bezier(0.68, -0.55, 0.27, 1.55) beschrijft een specifiek stuitergemak, maar de enige manier om te weten of die stuiter goed voelt voor je knop is om het te zien gebeuren En het zien gebeuren in je eigen project betekent de regel schrijven, de zweefstatus instellen, opslaan en je muis over het element bewegen, dan één getal aanpassen en het allemaal opnieuw doen Die lus is langzaam genoeg zodat de meeste mensen genoegen nemen met het eerste dat werkt in plaats van met datgene wat het beste voelt.
Een generator maakt van die lus een enkele klik Je stelt een duur in en drukt de trigger in, en het preview element speelt de overgang voor je Verander de timing functie en druk deze weer in, en je voelt het verschil tussen een lineaire slide en een easy-out settle direct Na een paar rondes ontwikkel je een gevoel voor hoe tweehonderd milliseconden aanvoelt versus vijfhonderd, dat is de intuïtie die beweging scheidt die helpt van beweging die in de weg staat Als je tevreden bent, is de werkende CSS al geschreven, dus er valt niets te transcriberen.
Hier geldt hetzelfde betrouwbaarheidsargument als bij elke visuele CSS-builder: je kunt geen misvormde produceren transition waarde door schuifregelaars te slepen en te kiezen uit menu's, zodat de uitvoer altijd veilig te plakken is Dat is de reden dat ik dit soort gereedschap dichtbij houd, hetzelfde instinct achter het reiken naar de CSS-transformatiegenerator als ik een transformatie nodig heb in plaats van graden in mijn hoofd te tellen.
Waar gaat de overgang heen, op de basistoestand of de zweefstaat?
Dit is de fout die ik het meest zie, en het is de moeite waard om duidelijk te zeggen omdat de oplossing zo eenvoudig is. De overgang hoort thuis op het element's basisstatus, niet op zijn :hover regel. Wanneer de overgang op de basisstatus wordt verklaard, animeert de browser de eigenschap in beide richtingen: hij komt in de zweefverandering terecht wanneer de aanwijzer arriveert, en hij wordt weer uitgeschakeld wanneer de aanwijzer vertrekt. Die symmetrie zorgt ervoor dat een interactie compleet aanvoelt.
Zet de overgang alleen maar op :hover en je krijgt een scheef effect De eigenschap animeert soepel op de weg naar binnen, omdat de overgang aanwezig is terwijl het element wordt opgehangen, maar op het moment dat de wijzer vertrekt, de :hover regel is niet meer van toepassing, de overgang gaat met het, en de eigenschap knapt direct terug Het resultaat is een knop die sierlijk oplost en dan terug naar beneden schokt, die er slechter uitziet dan helemaal geen animatie De generator' s uitvoer wordt geschreven om op de basisstatus te gaan, en de begeleiding wordt om precies deze reden in de tool gebakken Verklaar het één keer, op het element zelf, en laat de statuswijzigingen het activeren.
Wat is de juiste volgorde van de overgang steno?
de transition steno verpakt maximaal vier waarden in één regel, en de volgorde wordt bepaald door de specificatie: eigenschap, duur, timing-functie, vertraging Dus transition: opacity 300ms ease-in-out 100ms betekent de eigenschap van dekking, geanimeerd over driehonderd milliseconden, met behulp van een ease-in-out curve, na een vertraging van honderd milliseconden Krijg de bestelling verkeerd en de browser negeert de declaratie of leest het als iets wat u niet van plan was.
De ene regel die mensen vangt zijn de twee tijdswaarden Zowel de duur als de vertraging zijn tijden, en CSS onderscheidt ze puur op positie: de eerste tijdswaarde is altijd de duur, en de tweede is altijd de vertraging Als je maar één tijdswaarde schrijft, wordt deze gelezen als de duur, en blijft de vertraging bij zijn standaard van nul. Daarom is een overgang die te vroeg lijkt te beginnen vaak een geval van een vertraging die per ongeluk als eerste wordt geschreven. De generator omzeilt het hele probleem door de steno voor je in de juiste volgorde te bouwen, en laat de vertraging volledig achterwege als deze nul is, dus je verzendt nooit een volgopdracht 0ms dat doet niets Hier is de anatomie in een tabel.
| Part | toonbeeld | Wat het controleert |
|---|---|---|
| property | opacity |
Welke eigenschap animeert, of all voor elke animeerbare |
| duur | 300ms |
Hoe lang de animatie duurt; de eerste tijdswaarde |
| timing-functie | ease-in-out |
De versnellingscurve van de beweging |
| vertraging | 100ms |
Hoe lang te wachten voordat u begint; de tweede tijdswaarde |
Waarom zal mijn display: geen overgang niet animeren?
Dit is de klif, en bijna iedereen loopt er minstens één keer van af Je wilt dat er een element in vervaagt, dus je gaat over display ten gevolge van none tegen block en ingesteld opacity, en het element verschijnt gewoon zonder vervaging. De reden is fundamenteel: display is geen animeerbare eigenschap Er is geen tussenpunt none en block, geen waarde waar de browser op kan interpoleren bij de vijftig procent, dus er is niets aan tween. De verandering gebeurt onmiddellijk en elke ondoorzichtigheidsanimatie die je erop legt, wordt afgesneden omdat het element in het begin niet is weergegeven.
De klassieke oplossing is animeren opacity en visibility samen en vertrek display eruit. visibility kan overgaan omdat, hoewel het ook een discrete eigenschap is, door het te koppelen aan een duur, de browser het element zichtbaar houdt totdat de dekking vervaagt op de weg naar buiten. De moderne oplossing is transition-behavior: allow-discrete, een nieuwere mogelijkheid waarmee u discrete eigenschappen kunt animeren, zoals display aan de eindpunten van een transitie, zodat je echt kunt vervagen display: none in browsers die het ondersteunen Hoe dan ook, de les is hetzelfde: controleer of de eigenschap die u overschakelt tussenwaarden heeft voordat u zich een uur lang afvraagt waarom er niets beweegt Dit is het soort gotcha dat een live preview in seconden opduikt, wat een groot deel is van het argument voor het bouwen van beweging waar u het kunt bekijken.
Wat is een timingfunctie, en waarom maakt het zoveel uit?
De timingfunctie is het deel van een overgang dat beslist hoe de beweging voelt, en het doet veel meer werk dan de duur Twee overgangen van dezelfde lengte kunnen geheel anders aanvoelen, afhankelijk van hun curve A linear overgang beweegt met een constante snelheid en voelt mechanisch aan, als een machineonderdeel Een ease-out de overgang begint snel en vertraagt als deze aankomt, wat natuurlijk aanvoelt omdat het nabootst hoe fysieke objecten vertragen, en het is de juiste standaard voor de meeste interfacebewegingen. ease-in doet het tegenovergestelde en is het beste voor dingen die het scherm verlaten.
Daaronder zijn dit allemaal kubisch-bezier-curven. De trefwoorden ease, ease-in, ease-out en ease-in-out zijn gewoon vriendelijke namen voor specifieke cubic-bezier(x1, y1, x2, y2) waarden, waarbij de twee controlepunten de versnelling vormgeven Wat kubisch-bezier krachtig maakt is dat een controlepunt met een y waarde boven één of onder nul duwt de animatie voorbij zijn eindpunt en terug, dat is hoe je een overshoot of een bounce bouwt De generator bevat een Materiële standaardcurve voor schone interface beweging en een Back curve die overshoot voor een veerkrachtig, speels gevoel, plus een steps() functie voor beweging die in discrete frames springt in plaats van te glijden, en zo animeer je een sprite of een tikkende teller. Het kiezen van een curve en het indrukken van de trekker is de snelste manier om een gevoel op te bouwen voor wat iedereen doet.
Wanneer moet ik meerdere overgangslagen gebruiken?
Een enkele overgang bezielt één eigenschap, maar echte interacties veranderen vaak meerdere tegelijk Een knop die bij zweven omhoog gaat, kan zijn achtergrondkleur verschuiven, zijn transformatie stimuleren en zijn schaduw verdiepen, en elk van deze wil misschien zijn eigen timing. De transition property handelt dit af met een door komma's gescheiden lijst, waarbij elke invoer een volledige overgang is met zijn eigen eigenschap, duur, timingfunctie en vertraging.
De generator ondersteunt dit rechtstreeks: voeg voor elke eigenschap een laag toe, stem ze allemaal onafhankelijk af en het gereedschap voegt ze samen tot één steno transition: background-color 200ms ease, transform 200ms ease-out. De reden om eigenschappen afzonderlijke overgangen te geven in plaats van te gebruiken all is controle en prestaties. transition: all is handig, maar het animeert elke eigenschap die verandert, inclusief degene die je niet van plan was, en het dwingt de browser om alles te bekijken voor veranderingen Het benoemen van de specifieke eigenschappen is zowel voorspelbaarder als goedkoper De Slow reveal preset in de tool toont een tweelaagse overgang, vervagende dekking en het verplaatsen van een transformatie samen met een gedeelde vertraging, wat het standaardrecept is voor een element dat in zicht komt Als de transformatiekant van die koppeling is wat je aan het afstemmen bent, de CSS-transformatiegenerator is het bijbehorende hulpmiddel en de twee worden bijna altijd samen gebruikt.
Welke eigenschappen moet ik animeren voor soepele prestaties?
Niet alle eigenschappen zijn even goedkoop om te animeren, en de keuze heeft een direct effect op de vraag of uw overgang op een vloeiende zestig frames per seconde loopt of stottert. De twee eigenschappen die u verkiest zijn transform en opacity. Beide kunnen aan de GPU worden overhandigd en samengesteld zonder de pagina-indeling opnieuw te berekenen, dus het animeren ervan blijft soepel, zelfs op bescheiden hardware. Dit is de reden waarom een kaart die erin schuift transform: translateX voelt boterachtig terwijl dezelfde kaart geanimeerd is met left voelt ruw.
De eigenschappen om animeren te voorkomen zijn degene die de lay-out activeren: width, height, top, left, margin en padding. Het veranderen van een van deze dwingt de browser om de positie en grootte van het element en alles wat erdoor wordt beïnvloed, opnieuw te berekenen op elk afzonderlijk frame van de animatie, wat duur is en de meest voorkomende oorzaak van janky-beweging. Als je merkt dat je een breedte wilt animeren, is het meestal de moeite waard om je af te vragen of a transform: scaleX zou een soortgelijk effect goedkoper produceren De generator laat u elke eigenschap kiezen zodat u nooit wordt geblokkeerd, maar de eigenschappen die het opsomt, zetten transform en opacity bovenaan, want dat zijn degenen waar je het eerst naar moet grijpen. Het bredere argument voor het bouwen van een weloverwogen set van dit soort tools ligt in de Webontwikkelaar Toolkit stuk, en de workflowgewoonten erachter zitten in de Productiviteitstools voor ontwikkelaar guide.
Hoe houdt de generator de preview eerlijk?
Elke visuele bouwer loopt hetzelfde risico: de preview en de geëxporteerde code drijven uit elkaar totdat de tool je een waarde leert die zich niet zal reproduceren Deze generator past precies de transition waardeer het uitvoert naar het voorbeeldelement en activeert het met een echte statusverandering, dus de beweging die je ziet is de beweging die de gekopieerde CSS zal produceren Er is geen afzonderlijk animatiepad dat het er niet mee eens kan zijn.
Omdat een overgang alleen wordt uitgevoerd wanneer een eigenschap verandert, heeft de preview een status nodig om tussen te schakelen, wat de triggerknop doet: hij draait het element tussen twee sets waarden, zodat de overgang afvuurt en je kunt ernaar kijken. Dit weerspiegelt hoe een overgang in het wild werkt, waarbij een zweef-, focus- of een omgeschakelde klasse het instelt. De uitvoer blijft ook minimaal, waardoor de vertraging wordt verlaagd als deze nul is en alleen de lagen worden vermeld die u hebt toegevoegd, dezelfde discipline van het uitzenden van alleen betekenisvolle verklaringen die door de gradiëntgenerator en de doosschaduwgenerator.
Welke browsers ondersteunen CSS-overgangen?
CSS-overgangen worden in elke huidige browser ondersteund en zijn dat al ruim tien jaar. De transition property en al zijn longhands zijn universeel en ongeprefixed, dus de uitvoer van deze generator werkt in Chrome, Firefox, Safari en Edge zonder enige leveranciersvoorvoegsels of fallbacks De nieuwere transition-behavior: allow-discrete mogelijkheid voor het animeren van discrete eigenschappen zoals display is recenter en heeft een smallere ondersteuning, dus behandel die specifieke techniek als een progressieve verbetering en houd de opaciteit-en-zichtbaarheid koppeling als uw terugval Voor de gezaghebbende regels, de CSS Transitions Module Level 1 specificatie van de W3C is de primaire bron, en het is de moeite waard om te lezen zodra de generator u een gevoel heeft gegeven voor hoe de stukken passen.
Als u een bredere set visuele CSS-tools assembleert, worden de transformatiegenerator en de CSS filter generator koppel op natuurlijke wijze met deze, aangezien een overgang de transformaties en filters die u ermee bouwt glad maakt. Alles hier draait aan de clientzijde, en de CSS die u kopieert is aan u om te gebruiken zonder runtime, zonder bouwstap en zonder afhankelijkheid.
Veelgestelde vragen
Wat is een CSS transitie generator?
Een CSS-overgangsgenerator is een visueel hulpmiddel dat een CSS-overgang opbouwt vanuit de instellingen die u kiest U kiest een eigenschap, duur, timingfunctie en vertraging, en het voert de overgangskortte uit met een live preview die u kunt activeren om de versoepeling te bekijken.
Waar zet ik de overgang, op de basistoestand of de zweefstatus?
Zet het op de basisstatus Een overgang die op de basisregel wordt verklaard, bezielt de eigenschap in beide richtingen, in de zweefverandering en er weer uit. Door het alleen bij zweven te verklaren, wordt de verandering in geanimeerd, maar kan het onmiddellijk terugklikken als de aanwijzer vertrekt.
Wat is de volgorde van de overgang steno?
De volgorde is eigenschap, duur, timing-functie, vertraging, bijvoorbeeld overgang: opaciteit 300ms ease-in-out 100ms De eerste tijdswaarde is altijd de duur en de tweede is altijd de vertraging, dus een enkele tijdswaarde wordt gelezen als de duur.
Waarom zal mijn display: geen om weer te geven: blokovergang niet animeren?
Omdat display geen animeerbare eigenschap is Er is geen tussenwaarde tussen geen en blok, dus de browser heeft niets te tween Overgangsdekking en zichtbaarheid samen in plaats daarvan, of gebruik overgang-gedrag: allow-discrete in nieuwere browsers om te vervagen van weergave: geen.
Kan ik meer dan één woning tegelijk overzetten?
Ja. scheid elke overgang met een komma, bijvoorbeeld overgang: dekking 300m gemak, transformatie 200m sake-out Deze generator bouwt die lijst voor u op terwijl u lagen toevoegt, waardoor elke eigenschap zijn eigen duur, timingfunctie en vertraging krijgt.
Wat is een kubieke-bezier timing functie?
Een kubieke-bezier-timingfunctie definieert een aangepaste versnellingscurve vanuit twee controlepunten, geschreven kubieke-bezier (x1, y1, x2, y2).De trefwoorden gemak, gemak-in, gemak-uit en gemak-in-uit zijn snelkoppelingen voor specifieke curven, en controlepunten boven 1 of onder 0 creëren een overschrijding, en zo wordt een bounce gebouwd.
Welke eigenschappen moet ik animeren voor soepele prestaties?
Geef de voorkeur aan transformatie en dekking Ze zijn samengesteld op de GPU en activeren geen lay-out, dus animeren ze met 60 fps Animeren breedte, hoogte, boven, links of marge dwingt de browser om de lay-out op elk frame opnieuw te berekenen, wat de meest voorkomende oorzaak is van stotterende overgangen.
Is de gegenereerde transitie CSS gratis en veilig in gebruik?
Ja. de tool is volledig gratis zonder aanmeldings - of gebruikslimieten, en het zendt standaard, niet-voorafgestelde CSS uit die in elke moderne browser wordt ondersteund Alle verwerking gebeurt in uw browser, dus er wordt niets geüpload en de tool werkt offline zodra deze is geladen.
