Articles
Introduktion til CSS
Animation-relaterede CSS-egenskaber

Animation-relaterede CSS-egenskaber

Denne artikel forklarer animation-relaterede CSS-egenskaber.

Du kan lære om brugen og syntaksen for @keyframes, animation og transition egenskaber.

YouTube Video

HTML til 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>

Animation 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 bruges i CSS-animationer til at specificere, hvordan stilarter ændrer sig under animationen. I @keyframes specificeres stilændringer fra start til slut af animationen med procentangivelser eller nøgleord (from og to).

  • Dette er et eksempel på en animation, hvor et element glider fra venstre til højre og vender tilbage til sin oprindelige position.
  • I dette eksempel er slide skrevet efter @keyframes, der definerer en animation ved navn slide.
  • 0% er begyndelsen af animationen, hvor translateX(0) placerer elementet på dets oprindelige position.
  • 50% er midtvejs i animationen, hvor elementet flyttes 200px til højre med translateX(200px).
  • 100% er slutningen af animationen, hvor elementet vender tilbage til sin oprindelige position.
  • I box-animation-slide klassen bruges animation egenskaben til at anvende slide animationen 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 præcist kontrollere stilarterne under en animation. Ved at specificere procentangivelser kan du anvende forskellige stilarter på vilkårlige tidspunkter.
    • I dette eksempel ændrer farven sig gradvist fra rød til blå til grøn til gul og tilbage 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 eksempel er from lig med 0%, og to er lig med 100%. Dette giver dig mulighed for at definere simple animationer.

Grundlæggende syntaks 

 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å animationen. Dette angives ved hjælp af animation-egenskaben eller animation-name-egenskaben.
  • Procentangivelser eller Nøgleord: Brug procentangivelser fra 0% til 100% eller nøgleordene from (svarer til 0%) og to (svarer til 100%).

animation Egenskab 

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-egenskaben bruges til at anvende animationer på et element. Animationer definerer, hvordan et sæt CSS-stilarter ændrer sig over tid. Med animation-egenskaben kan du kontrollere timingen, adfærden, forsinkelsen, antallet af gentagelser og mere i en animation.

  • Box-animation-ease-in-out klassen angiver slide som animation-name og bruger slide-animationen defineret i @keyframes.
    • 3s er animation-duration, hvilket betyder, at hver animationscyklus afsluttes på 3 sekunder.
    • Ease-in-out er animation-timing-function, som får animationen til at starte langsomt, accelerere og derefter igen langsomme ned ved slutningen.
    • Infinite er animation-iteration-count, hvilket betyder, at animationen gentages uendeligt.
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 angiver color-change som animation-name og bruger color-change-animationen defineret i @keyframes.
    • 1s efterfulgt af ease-in-out er animation-delay, som angiver forsinkelsen, før animationen starter. Animationen starter 1 sekund senere.
    • 3 efter 1s er animation-iteration-count, hvilket betyder, at animationen gentages 3 gange.
    • Alternate er animation-direction, som angiver animationsafspillingsretningen. Alternate angiver, at animationen afspilles skiftevis.

Sammensætningen af animation-egenskaben

Animation-egenskaben er en genvejsejendom, der kombinerer flere under-egenskaber til én. Her er de vigtigste under-egenskaber:.

  • Animation-name-egenskab: Angiver navnet på den animation, der skal anvendes. Det skal svare til navnet på den animation, der er defineret i @keyframes.
  • Animation-duration-egenskab: Angiver den tid, det tager for animationen at fuldføre én cyklus. Tidsenhederne er sekunder (s) eller millisekunder (ms).
  • Animation-timing-function-egenskab: Angiver animations hastighedskurve. Værdier som ease, linear, ease-in, ease-out, ease-in-out, osv. anvendes.
    • Specificering af ease starter animationen langsomt, fremskynder den og sænker derefter igen hastigheden ved slutningen.
    • Specificering af linear får animationen til at forløbe med en konstant hastighed fra start til slut.
    • Angivelse af ease-in starter animationen langsomt og slutter hurtigt.
    • Angivelse af ease-out starter animationen hurtigt og slutter langsomt.
    • Angivelse af ease-in-out starter langsomt, fortsætter hurtigt og slutter langsomt.
  • animation-delay-egenskaben angiver forsinkelsen, før animationen starter. Tidsenheden er enten sekunder eller millisekunder.
  • animation-iteration-count-egenskaben angiver, hvor mange gange animationen skal gentage. Angivelse af infinite gentager animationen på ubestemt tid.
  • animation-direction-egenskaben angiver afspilningsretningen for animationen. Muligheder inkluderer normal (fremadrettet), reverse (baglæns), alternate (afspilles skiftevis) og alternate-reverse (afspilles skiftevis begyndende baglæns).
  • animation-fill-mode-egenskaben angiver animationens tilstand før start og efter slut. Du kan angive en af none, forwards, backwards eller both.
  • animation-play-state-egenskaben angiver, om animationen kører eller er på pause. Du kan angive running eller paused.

Sammendrag

animation-egenskaben er et kraftfuldt værktøj til dynamisk at ændre elementernes stil. Ved hjælp af @keyframes kan du definere, hvordan stilarter ændrer sig over tid, og styre detaljeret animationens opførsel med hver under-egenskab af animation.

transition-egenskab 

 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-egenskaben bruges til at anvende animationseffekter på CSS-stilændringer. Den gør det muligt for ændringer at vises glidende under tilstandsændringer som hover, focus, active eller når stilarter ændres dynamisk via JavaScript.

Lad os se på et eksempel på transition-box-klassen, hvor baggrundsfarven ændres glidende, når man holder musen over en knap. - I transition-box-klassen anvender transition-egenskaben en 2-sekunders overgang til baggrundsfarveændringen. Ændringen er angivet som ease, hvilket gør den glidende. - hover pseudo-klassen ændrer baggrundsfarven fra lightgray til steelblue, når musen holdes over knappen. Denne ændring sker glidende over de 2 sekunder, der er angivet i transition-box-klassen.

Det er muligt at anvende transition på flere egenskaber samtidig. - I eksemplet med transition-2-properties-klassen ændres baggrundsfarven på 5 sekunder, og bredden ændres på 0,5 sekunder.

Grundlæggende syntaks 

1/* Basic syntax of transition */
2transition: property duration timing-function delay;
  • property angiver, hvilke CSS-egenskaber animationen skal anvendes på. At angive all anvender animationen på alle egenskaber.
  • duration angiver, hvor lang tid det tager at fuldføre animationen. Angiv ved hjælp af sekunder (s) eller millisekunder (ms).
  • timing-function angiver ændringen i hastigheden af animationen. Du kan bruge muligheder som ease, linear, ease-in, ease-out, ease-in-out osv.
  • delay angiver forsinkelsestiden, før animationen starter. Angiv i sekunder eller millisekunder.

Detaljerede egenskaber 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å bruges som individuelle egenskaber som følger.

  • transition-property: Angiver den egenskab, som animationen anvendes på.
  • transition-duration: Angiver varigheden, indtil animationen er fuldført.
  • transition-timing-function: Angiver progressionens hastighed for animationen. Muligheder som ease, linear, ease-in, ease-out, ease-in-out kan bruges.
  • transition-delay: Angiver forsinkelsestiden, før animationen starter.

Du kan følge med i ovenstående artikel ved hjælp af Visual Studio Code på vores YouTube-kanal. Husk også at tjekke YouTube-kanalen.

YouTube Video

CSS-egenskaber relateret til filtereffekterCSS-egenskaber relateret til 3D-animation