Hvordan spille flere CSS-animasjoner samtidig?

Denne artikkelen demonstrerer en praktisk demonstrasjon for å spille/legge til flere CSS-animasjoner samtidig.

Hvordan spille flere CSS-animasjoner samtidig?

Ved å bruke flere CSS-animasjoner samtidig, kan utviklerne enkelt lage mer engasjerende grensesnitt. For å spille av mange CSS-animasjoner samtidig, gi hver enkelt et unikt navn og bruk disse navnene på samme eller separate komponenter på siden.

Følg prosedyren nedenfor for å spille av/legge til mer enn én animasjon samtidig.

Trinn 1: Oppretting av struktur

Lag først et HTML-element der animasjonene blir brukt i kommende trinn. For eksempel skal bildet settes inn:

I kodebiten ovenfor:

• Først settes bildebanen til ' src ' Egenskap.
• Deretter verdien av ' 100 piksler ' er gitt til CSS-egenskapene 'bredde' og 'høyde'.
• Sett også verdien av ' animere ' til ' klasse ' Egenskap.

Trinn 2: Sette opp animasjoner

« nøkkelbilder ' brukes til å lage tilpassede animasjoner i henhold til behovet til nettsiden. For eksempel opprettes to animasjoner i kodebiten nedenfor:

I kodebiten ovenfor:

• Først, ' @-webkit-keyframes 'mekanismen blir brukt for å sette opp' snurre rundt ' og ' rotere ' navngitte animasjoner.
• Deretter bruker du ' forvandle ' eiendom som har en verdi av ' rotere() ' i ' snurre rundt ” animasjonskropp. Denne funksjonen roterer elementet i en vinkel på ' 180 grader '.
• Deretter angir du animasjonen som vokser eller utvider det originale elementet med en faktor på ' 1 'i både ' X ' og ' OG '-aksen i ' skala ” animasjonskropp.

Trinn 3: Bruk animasjon på HTML-elementer

Inne i CSS-delen velger du klassen ' animere ' som er tildelt ' '-taggen, og oppgi følgende CSS-egenskaper:

Beskrivelse av egenskapene som brukes i kodeblokken ovenfor:

• Først setter du verdien på ' absolutt ' til CSS ' posisjon ' eiendom. Det justerer ' img '-element i henhold til animasjonen.
• Angi deretter verdiene for ' 60 % ', ' 110 piksler ' og ' 110 piksler ' til CSS ' venstre ', ' bredde ' og ' høyde ' egenskaper. Disse egenskapene brukes til å angi posisjonen og størrelsen til et element.
• Sett deretter verdien på ' skala 3s uendelig lineær ' til ' -webkit-animasjon ' CSS-egenskap.
• Og ' 3s ' er varigheten av den animasjonen, ' uendelig ' er varigheten av animasjonen, og ' lineær ” er retningen for animasjonen.
• Til slutt, oppgi verdiene for ' spin 2s uendelig lineær ' til CSS ' -webkit-animasjon ' eiendom. Denne egenskapen legger til den andre animasjonen som heter ' snurre rundt ' på ' img ' element.

Etter kompileringen av kodeblokken ovenfor, ser animasjonen slik ut:

Ovennevnte gif illustrerer at bare ' snurre rundt ” animasjon spilles av på det målrettede elementet.

Trinn 4: Spill av flere animasjoner på HTML-elementer

Som i trinnet ovenfor, har bare én animasjon blitt brukt på elementet. Dette er fordi flere verdier har blitt tilordnet den samme ' -webkit-animasjon ' eiendom.

For å løse dette problemet, pakk målelementet med et annet HTML-element. Som ' div ' allerede brukes som omslag i det første trinnet, velg ' span ' og oppdater koden slik:

I koden ovenfor:

• Til å begynne med var ' animere '-klassen forblir den samme og bare den andre animasjonen fjernes fra den som er plassert i ' span ' klasse.
• Still deretter posisjonen ved å bruke ' posisjon ' og ' topp ' egenskaper.

Etter utførelse av kodebiten ovenfor, ser nettsiden nå slik ut:

Utdataene viser at begge animasjonene har blitt brukt på det valgte HTML-elementet samtidig.

Konklusjon

For å bruke flere CSS-egenskaper, pakk inn elementet med HTML-elementer og bruk animasjoner på dem slik at hvert HTML-element inneholder en enkelt animasjon. Ettersom den underordnede egenskapen arver animasjonen som er brukt på det overordnede HTML-elementet, blir flere animasjoner brukt uten å forårsake feil eller tvetydighet for kompilatoren. Det er prosedyren for å spille/legge til mer enn én CSS-animasjon samtidig.