Animaties: CSS-animatie-effecten inspecteren en aanpassen

Sofia Emelianova
Sofia Emelianova

Inspecteer en wijzig animaties met het Chrome DevTools-tabblad Animaties .

Overzicht

Om animaties vast te leggen, opent u het tabblad Animaties . Het detecteert automatisch animaties en sorteert ze in groepen.

Het tabblad Animaties heeft twee hoofddoelen:

  • Animaties inspecteren . Vertraag, speel opnieuw of inspecteer de broncode voor een animatiegroep.
  • Animaties aanpassen . Wijzig de timing, vertraging, duur of keyframe-offsets van een animatiegroep. Het bewerken van sleutelframes en Bezier wordt niet ondersteund.

Het tabblad Animaties ondersteunt CSS-animaties, CSS-overgangen, webanimaties en de View Transitions API . requestAnimationFrame animaties worden nog niet ondersteund.

Wat is een animatiegroep?

Een animatiegroep is een reeks animaties die verband lijken te houden met elkaar.

Voorlopig heeft het web geen echt concept van een groepsanimatie, dus schrijven bewegingsontwerpers en -ontwikkelaars individuele animaties en timen ze deze zodat ze als één samenhangend visueel effect verschijnen. Het tabblad Animaties voorspelt gerelateerde animaties op basis van de starttijd (exclusief vertragingen) en groepeert ze naast elkaar.

Met andere woorden: op het tabblad Animaties worden animaties gegroepeerd die in hetzelfde scriptblok worden geactiveerd, maar als ze asynchroon zijn, komen ze in verschillende groepen terecht.

Begin

Er zijn twee manieren om het tabblad Animaties te openen:

  • Selecteer Meer. Pas DevTools aan en beheer deze > Meer tools > Animaties . Animaties in het menu.
  • Open het Commandomenu door op een van de volgende knoppen te drukken:

    • Op macOS: Command + Shift + P
    • Op Windows, Linux of ChromeOS: Control + Shift + P

    Begin vervolgens met het typen van Show Animations en selecteer het overeenkomstige Drawer-paneel. Animaties weergeven.

Standaard wordt het tabblad Animaties geopend als een tabblad naast de consolelade . Als ladetabblad kunt u het met elk paneel gebruiken of naar de bovenkant van DevTools verplaatsen .

Leeg tabblad Animaties.

Het tabblad Animaties heeft vier hoofdsecties:

De secties van het deelvenster Animaties.

  1. Controles . Vanaf hier kunt u alle vastgelegde animatiegroepen wissen blokkeren , pauzeren of afspelen_arrow animaties hervatten, of de snelheid van de geselecteerde animatiegroep wijzigen .
  2. Overzicht . Selecteer hier een animatiegroep om deze te bekijken en te wijzigen in het detailvenster .
  3. Tijdlijn . replay Speel een animatie opnieuw af, scrub hem of spring naar een specifiek punt.
  4. Details . Inspecteer en wijzig de geselecteerde animatiegroep.

Om een ​​animatie vast te leggen, activeert u deze terwijl het tabblad Animaties geopend is. Als er een animatie wordt geactiveerd bij het laden van de pagina, laadt u deze opnieuw.

Animaties inspecteren

Nadat u een animatie heeft vastgelegd, kunt u deze op een aantal manieren opnieuw afspelen:

  • Beweeg de muis over de miniatuur in het overzichtsvenster om er een voorbeeld van te bekijken.
  • Versleep de afspeelkop (rode verticale balk) om de viewport-animatie te verschuiven of klik ergens op de tijdlijn om de afspeelkop op een specifiek punt in te stellen. De animatie blijft spelen als deze al aan het spelen was en stopt anders.
  • Selecteer de animatiegroep in het overzichtsvenster (zodat deze wordt weergegeven in het detailvenster ) en druk op Knop Opnieuw afspelen. Knop Opnieuw afspelen . De animatie wordt opnieuw afgespeeld in de viewport.

Klik op de Knoppen voor animatiesnelheid. Knoppen voor animatiesnelheid in de bedieningsbalk om de voorbeeldsnelheid van de geselecteerde animatiegroep te wijzigen.

Bekijk animatiedetails

Nadat u een animatiegroep hebt vastgelegd, klikt u erop in het overzichtsvenster om de details ervan te bekijken.

In het detailvenster krijgt elke afzonderlijke animatie een eigen rij. Als u de volledige naam van het overeenkomstige element wilt zien, wijzigt u het formaat van de naamkolom.

Het detailvenster.

Beweeg over een animatie om deze in de viewport te markeren. Klik op de animatie om deze te selecteren in het deelvenster Elementen .

Beweeg over een animatie om deze in de viewport te markeren.

Sommige animaties worden voor onbepaalde tijd herhaald als de eigenschap animation-iteration-count is ingesteld op infinite . Op het tabblad Animaties worden hun definities en iteraties weergegeven.

Animatie-iteraties.

Het meest linkse, donkerste gedeelte van een animatie is de definitie ervan. De rechter, meer vervaagde secties vertegenwoordigen iteraties.

In de volgende schermafbeelding vertegenwoordigen secties twee en drie bijvoorbeeld iteraties van sectie één.

Diagram van animatie-iteraties.

Als op twee elementen dezelfde animatie is toegepast, wijst het tabblad Animaties ze dezelfde kleur toe. De kleur zelf is willekeurig en heeft geen betekenis. In de onderstaande schermafbeelding is bijvoorbeeld op de twee elementen div.eye.left::after en div.eye.right::after dezelfde animatie ( eyes ) toegepast, evenals op de div.feet::before en div.feet::after elementen.

Kleurgecodeerde animaties.

Animaties aanpassen

Er zijn drie manieren waarop u een animatie kunt wijzigen via het tabblad Animaties :

  • Animatieduur.
  • Keyframe-timings.
  • Starttijdvertraging.

Stel voor deze sectie dat de volgende schermafbeelding de originele animatie vertegenwoordigt:

Originele animatie vóór wijziging.

Om de duur van een animatie te wijzigen, sleept u de eerste of laatste cirkel.

Gewijzigde duur.

Als de animatie sleutelframeregels definieert, worden deze weergegeven als witte binnenste cirkels. Versleep een van deze om de timing van het hoofdframe te wijzigen.

Gewijzigd sleutelframe.

Als u een vertraging aan een animatie wilt toevoegen, klikt u op de animatie zelf, niet op de cirkels, en sleept u deze vervolgens ergens naartoe.

Gewijzigde vertraging.

Bewerk de ::view-transition pseudo-elementen tijdens een animatie

Met de View Transitions API kunt u de DOM in één stap wijzigen, terwijl u een geanimeerde overgang tussen de twee statussen creëert. Tijdens een animatie construeert de API een boom met pseudo-elementen met de volgende structuur:

::view-transition
└─ ::view-transition-group(root)
   └─ ::view-transition-image-pair(root)
      ├─ ::view-transition-old(root)
      └─ ::view-transition-new(root)

Om deze structuur te bewerken in Elementen > Stijlen :

  1. Open DevTools en inspecteer een pagina die gebruikmaakt van de View Transitions API. Deze demopagina bijvoorbeeld.
  2. Klik in Animaties op Pauze Pauzeren .
  3. Activeer op de pagina een animatie. Het deelvenster Animaties legt het vast en pauzeert onmiddellijk. Je kunt nu de ::view-transition structuur in de DOM vinden, bovenop het <head> element.

    Bewerken van de CSS van ::view-transition pseudo-element.

  4. Wijzig in Elementen > Stijlen de CSS van ::view-transition pseudo-elementen.

  5. Hervat de animatie en speel deze opnieuw af om het resultaat te zien.

Zie Vloeiende en eenvoudige overgangen met de View Transitions API voor meer informatie.