CSS Transition Generator

De CSS Transition Generator is een visuele editor voor de CSS-overgangseigenschap U kiest welke eigenschap u wilt animeren, stelt de duur in, kiest een timingfunctie en voegt een vertraging toe, activeert vervolgens een live preview om de exacte versoepeling te bekijken voordat u de declaratie kopieert U kunt verschillende overgangen in één steno leggen - bijvoorbeeld vervagende opaciteit tijdens het verplaatsen van een transformatie - en elke laag krijgt zijn eigen eigenschap, duur, timing en vertraging.

Een overgang vertelt de browser om de verandering tussen twee waarden van een eigenschap te animeren in plaats van onmiddellijk te schakelen. Verander een achtergrondkleur bij hover zonder overgang en deze klikt vast; voeg overgang toe: achtergrondkleur 200 meter gemak en dezelfde verandering versoepelt over een vijfde van een seconde. De overgang leeft in de basisstatus, niet in de zweefstatus, dus het element animeert zowel in als uit de verandering, waardoor een interactie zich eerder voltooid dan abrupt voelt op de terugweg.

Alles gebeurt in uw browser Start vanuit een preset zoals Fade, Button hover of Bounce, pas de schuifregelaars aan en selecteert, druk op de voorbeeldtrigger om de beweging te zien en kopieer de steno De tool schrijft de vier delen in de volgorde die de specificatie vereist - eigenschap, duur, timing-functie, vertraging - en laat de vertraging weg wanneer deze nul is Geen account, geen uploads en het blijft offline werken zodra de pagina is geladen.

De meest voorkomende fout is het proberen een eigenschap over te zetten die geen tussenliggende waarden heeft. weergave: geen om weer te geven: blok kan niet animeren, omdat weergave geen animeerbare eigenschap is - er is geen midden tussen geen en blok - daarom springt een fade-in die alleen op het display is gebouwd. De oplossing is om dekking en zichtbaarheid samen over te zetten, of om het nieuwere, toegestane discrete gedrag te gebruiken. Het is ook de moeite waard om transformatie en dekking te animeren in plaats van breedte, hoogte, boven of links: de eerste twee zijn samengesteld op de GPU en activeren geen lay-out, dus ze blijven soepel, terwijl het animeren van lay-outeigenschappen de pagina op elk frame opnieuw berekent en de gebruikelijke bron van rukige, stotterende overgangen is.