Articles
Introduksjon til CSS
Animasjonsrelaterte CSS-egenskaper

Animasjonsrelaterte CSS-egenskaper

Denne artikkelen forklarer animasjonsrelaterte CSS-egenskaper.

Du kan lære om bruk og syntaks for @keyframes, animation og transition-egenskaper.

YouTube Video

HTML for Forhåndsvisning

css-animation.html 
 1<!DOCTYPE html>
 2<html lang="en">
 3<head>
 4    <meta charset="UTF-8">
 5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6    <title>CSS Properties Example</title>
 7    <link rel="stylesheet" href="css-base.css">
 8    <link rel="stylesheet" href="css-animation.css">
 9</head>
10<body>
11    <!-- Header -->
12    <header>
13        <h1>CSS Properties For Animation</h1>
14    </header>
15
16    <!-- Main content -->
17    <main>
18        <header>
19            <h2>Animation Related Properties</h2>
20        </header>
21        <article>
22            <h3>@keyframes</h3>
23            <section>
24                <h4>Animation Examples</h4>
25                <header><h4>animation: slide 3s ease infinite</h4></header>
26                <section class="sample-view">
27                    <div class="box-animation-slide">Slide Box</div>
28                </section>
29                <header><h4>animation: color-change 3s ease infinite</h4></header>
30                <section class="sample-view">
31                    <div class="box-animation-color-change">Color Change Box</div>
32                </section>
33                <header><h4>animation: fade 3s ease infinite</h4></header>
34                <section class="sample-view">
35                    <div class="box-animation-fade">Fade Box</div>
36                </section>
37            </section>
38        </article>
39        <article>
40            <h3>animation</h3>
41            <section>
42                <h4>Animation Examples</h4>
43                <header><h4>animation: slide 3s ease-in-out infinite</h4></header>
44                <section class="sample-view">
45                    <div class="box-animation-ease-in-out">Slide Box</div>
46                </section>
47                <header><h4>animation: color-change 3s ease-in-out 1s 3 alternate</h4></header>
48                <section class="sample-view">
49                    <div class="box-animation-alternate">Color Change Box</div>
50                </section>
51            </section>
52        </article>
53        <article>
54            <h3>transition</h3>
55            <section>
56                <h4>Transition Examples</h4>
57                <header><h4>transition: background-color 2s ease</h4></header>
58                <section class="sample-view">
59                    <div class="transition-box">Hover me!</div>
60                </section>
61                <header><h4>transition: background-color 5s ease, width 0.5s ease-in</h4></header>
62                <section class="sample-view">
63                    <div class="transition-2-properties">Hover me!</div>
64                </section>
65            </section>
66        </article>
67    </main>
68</body>
69</html>

Animasjon og Overgang

@keyframes-regel 

 1/* Animation definition */
 2@keyframes slide {
 3    0% {
 4        transform: translateX(0);
 5    }
 6    50% {
 7        transform: translateX(200px);
 8    }
 9    100% {
10        transform: translateX(0);
11    }
12}
13
14/* Apply the animation */
15.box-animation-slide {
16    width: 100px;
17    height: 100px;
18    background-color: skyblue;
19    animation: slide 3s ease infinite;
20}

@keyframes brukes i CSS-animasjoner for å spesifisere hvordan stiler endres under animasjonen. I @keyframes spesifiseres stilendringer fra starten til slutten av animasjonen med tidsprosentandeler eller nøkkelord (from og to).

  • Dette er et eksempel på en animasjon der et element glir fra venstre til høyre og returnerer til sin opprinnelige posisjon.
  • I dette eksemplet er slide skrevet etter @keyframes, som definerer en animasjon ved navn slide.
  • 0% er starten av animasjonen, der translateX(0) plasserer elementet på sin opprinnelige plassering.
  • 50% er midt i animasjonen, der elementet beveger seg 200 piksler til høyre ved bruk av translateX(200px).
  • 100% er slutten av animasjonen, der elementet returnerer til sin opprinnelige posisjon.
  • I box-animation-slide-klassen brukes animation-egenskapen for å bruke slide-animasjonen med 3 sekunders intervaller.
 1@keyframes color-change {
 2    0% {
 3        background-color: red;
 4    }
 5    25% {
 6        background-color: blue;
 7    }
 8    50% {
 9        background-color: green;
10    }
11    75% {
12        background-color: yellow;
13    }
14    100% {
15        background-color: red;
16    }
17}
18
19.box-animation-color-change {
20    width: 100px;
21    height: 100px;
22    background-color: skyblue;
23    animation: color-change 3s ease infinite;
24}
  • Du kan detaljerte kontrollere stilene under en animasjon. Ved å spesifisere prosentandeler kan du bruke forskjellige stiler på vilkårlige tidspunkter.
    • I dette eksemplet endres fargen gradvis fra rød til blå, til grønn, til gul, og tilbake til rød.
 1@keyframes fade {
 2    from {
 3        opacity: 0;
 4    }
 5    to {
 6        opacity: 1;
 7    }
 8}
 9
10.box-animation-fade {
11    width: 100px;
12    height: 100px;
13    background-color: blue;
14    animation: fade 3s ease infinite;
15}
  • I dette eksemplet tilsvarer from 0% og to tilsvarer 100%. Dette lar deg definere enkle animasjoner.

Grunnleggende Syntax 

 1@keyframes animation-name {
 2    0% {
 3        /* Style at the start */
 4    }
 5    50% {
 6        /* Style at the midpoint */
 7    }
 8    100% {
 9        /* Style at the end */
10    }
11}
  • animation-name: Navnet på animasjonen. Dette spesifiseres ved å bruke animation-egenskapen eller animation-name-egenskapen.
  • Prosentandel eller nøkkelord: Bruk prosentandeler fra 0% til 100%, eller nøkkelordene from (tilsvarer 0%) og to (tilsvarer 100%).

animation-egenskapen 

1.box-animation-ease-in-out {
2    width: 100px;
3    height: 100px;
4    background-color: skyblue;
5    animation: slide 3s ease-in-out infinite;
6}

animation-egenskapen brukes til å anvende animasjoner på et element. Animasjoner definerer hvordan et sett med CSS-stiler endrer seg over tid. Med animation-egenskapen kan du kontrollere tidspunkt, oppførsel, forsinkelse, antall repetisjoner og mer for en animasjon.

  • box-animation-ease-in-out-klassen angir slide som animation-name og bruker slide-animasjonen definert i @keyframes.
    • 3s er animation-duration, som betyr at hver animasjonssyklus fullføres på 3 sekunder.
    • ease-in-out er animation-timing-function, som gjør at animasjonen starter sakte, akselererer og deretter senkes igjen på slutten.
    • infinite er animation-iteration-count, som betyr at animasjonen vil gjentas på ubestemt tid.
1.box-animation-alternate {
2    width: 100px;
3    height: 100px;
4    background-color: skyblue;
5    animation: color-change 3s ease-in-out 1s 3 alternate;
6}
  • box-animation-alternate-klassen angir color-change som animation-name og bruker color-change-animasjonen definert i @keyframes.
    • 1s etter ease-in-out er animation-delay, som spesifiserer forsinkelsen før animasjonen starter. Animasjonen vil starte ett sekund senere.
    • 3 etter 1s er animation-iteration-count, som betyr at animasjonen gjentas 3 ganger.
    • alternate er animation-direction, som spesifiserer avspillingsretningen for animasjonen. alternate spesifiserer at animasjonen spilles av vekselvis.

Sammensetningen av animation-egenskapen.

animation-egenskapen er en kortfattet egenskap som kombinerer flere underordnede egenskaper i én. Her er de viktigste underordnede egenskapene:.

  • animation-name-egenskapen: Spesifiserer navnet på animasjonen som skal brukes. Den må samsvare med navnet på animasjonen definert i @keyframes.
  • animation-duration-egenskapen: Spesifiserer hvor lang tid animasjonen bruker på å fullføre én syklus. Tidsenhetene er sekunder (s) eller millisekunder (ms).
  • animation-timing-function-egenskapen: Spesifiserer hastighetskurven for animasjonen. Verdier som ease, linear, ease-in, ease-out, ease-in-out, osv. brukes.
    • Å spesifisere ease gjør at animasjonen starter sakte, akselererer og deretter senkes igjen på slutten.
    • Å spesifisere linear gjør at animasjonen beveger seg med konstant hastighet fra start til slutt.
    • Spesifiseringen av ease-in starter animasjonen sakte og avslutter raskt.
    • Spesifiseringen av ease-out starter animasjonen raskt og avslutter sakte.
    • Spesifiseringen av ease-in-out starter sakte, går videre raskt, og avslutter sakte.
  • animation-delay-egenskapen spesifiserer forsinkelsen før animasjonen starter. Tidsenheten er enten sekunder eller millisekunder.
  • animation-iteration-count-egenskapen spesifiserer hvor mange ganger animasjonen skal gjentas. Spesifiseringen av infinite vil gjenta animasjonen på ubestemt tid.
  • animation-direction-egenskapen spesifiserer avspillingsretningen til animasjonen. Alternativene inkluderer normal (forover), reverse (bakover), alternate (spilles vekselvis), og alternate-reverse (spilles vekselvis med baklengs start).
  • animation-fill-mode-egenskapen spesifiserer tilstanden til animasjonen før den starter og etter den avslutter. Du kan spesifisere en av none, forwards, backwards, eller both.
  • animation-play-state-egenskapen spesifiserer om animasjonen kjører eller er satt på pause. Du kan spesifisere running eller paused.

Sammendrag

animation-egenskapen er et kraftig verktøy for dynamisk å endre stilen til elementer. Ved å bruke @keyframes kan du definere hvordan stiler endres over tid og kontrollere detaljert oppførsel av animasjonen med hver under-egenskap til animation.

transition-egenskap 

 1.transition-box {
 2    background-color: lightgray;
 3    transition: background-color 2s ease;
 4}
 5
 6.transition-box:hover {
 7    background-color: steelblue;
 8}
 9
10.transition-2-properties {
11    background-color: lightgray;
12    width: 150px;
13    height: 50px;
14    transition: background-color 5s ease, width 0.5s ease-in;
15}
16
17.transition-2-properties:hover {
18    background-color: blue;
19    width: 250px;
20}

transition-egenskapen brukes til å bruke animasjonseffekter på CSS-stilendringer. Den lar endringer vises jevnt under tilstandsbytter som hover, focus, active, eller når stiler endres dynamisk av JavaScript.

La oss se på et eksempel med transition-box-klassen der bakgrunnsfargen endres jevnt når musen holdes over en knapp. - I transition-box-klassen bruker transition-egenskapen en 2-sekunders overgang på endringen av bakgrunnsfargen. Endringen spesifiseres som ease, som gjør den jevn. - hover-pseudo-klassen endrer bakgrunnsfargen fra lightgray til steelblue når musen holdes over knappen. Denne endringen skjer jevnt over de 2 sekundene som er spesifisert i transition-box-klassen.

Det er mulig å bruke transition på flere egenskaper samtidig. - I transition-2-properties-klasse-eksempelet endres bakgrunnsfargen på 5 sekunder og bredden på 0,5 sekunder.

Grunnleggende Syntax 

1/* Basic syntax of transition */
2transition: property duration timing-function delay;
  • property spesifiserer hvilke CSS-egenskaper animasjonen skal brukes på. Spesifisering av all bruker animasjonen på alle egenskaper.
  • duration spesifiserer tiden det tar før animasjonen fullføres. Spesifiser ved å bruke sekunder (s) eller millisekunder (ms).
  • timing-function spesifiserer endringen i animasjonens hastighet. Du kan bruke alternativer som ease, linear, ease-in, ease-out, ease-in-out, osv.
  • delay spesifiserer forsinkelsestiden før animasjonen starter. Spesifiser i sekunder eller millisekunder.

Detaljerte egenskaper for transition 

1/* Detailed properties of transition */
2transition-property: background-color;
3transition-duration: 0.3s;
4transition-timing-function: ease;
5transition-delay: 500ms;

transition kan også brukes som individuelle egenskaper som følger.

  • transition-property: Spesifiserer egenskapen animasjonen brukes på.
  • transition-duration: Spesifiserer varigheten til animasjonen er fullført.
  • transition-timing-function: Spesifiserer progresjonshastigheten for animasjonen. Alternativer som ease, linear, ease-in, ease-out, ease-in-out kan brukes.
  • transition-delay: Spesifiserer forsinkelsestiden før animasjonen starter.

Du kan følge med på artikkelen ovenfor ved å bruke Visual Studio Code på vår YouTube-kanal. Vennligst sjekk ut YouTube-kanalen.

YouTube Video

CSS-egenskaper relatert til filtereffekterCSS-egenskaper relatert til 3D-animasjon