Meerdere Animaties Combineren
We kunnen de verkorte notatie gebruiken om alle animatie-eigenschappen op te geven. De syntaxis is als volgt:
animation: <name> <duration> <timing_function> <delay> <iteration-count> <direction> <fill-mode> <play-state>
Laten we de volgende eigenschappen kort herschrijven.
Uitgebreide manier
animation-name: Rotation;
animation-duration: 5s;
animation-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
animation-delay: 100ms;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-fill-mode: backwards;
animation-play-state: running;
Verkorte notatie
animation: Rotation 5s cubic-bezier(0.075, 0.82, 0.165, 1) 100ms infinite alternate backwards running;
Dit ziet er verwarrend uit, en het is gemakkelijk om een waarde over het hoofd te zien. Toch hebben we deze mogelijkheid.
Opmerking
Voor de browser is er geen verschil tussen de verkorte notatie en de uitgebreide manier van het specificeren van de animatie.
Bedankt voor je feedback!
Vraag AI
Vraag AI
Vraag wat u wilt of probeer een van de voorgestelde vragen om onze chat te starten.
Can you explain what each value in the shorthand means?
Are there any best practices for using the shorthand animation property?
What happens if I omit some values in the shorthand?
Geweldig!
Completion tarief verbeterd naar 2.08Meerdere Animaties Combineren
Veeg om het menu te tonen
We kunnen de verkorte notatie gebruiken om alle animatie-eigenschappen op te geven. De syntaxis is als volgt:
animation: <name> <duration> <timing_function> <delay> <iteration-count> <direction> <fill-mode> <play-state>
Laten we de volgende eigenschappen kort herschrijven.
Uitgebreide manier
animation-name: Rotation;
animation-duration: 5s;
animation-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
animation-delay: 100ms;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-fill-mode: backwards;
animation-play-state: running;
Verkorte notatie
animation: Rotation 5s cubic-bezier(0.075, 0.82, 0.165, 1) 100ms infinite alternate backwards running;
Dit ziet er verwarrend uit, en het is gemakkelijk om een waarde over het hoofd te zien. Toch hebben we deze mogelijkheid.
Opmerking
Voor de browser is er geen verschil tussen de verkorte notatie en de uitgebreide manier van het specificeren van de animatie.
Bedankt voor je feedback!
