Articles
Introduktion till CSS
CSS-egenskaper relaterade till animation

CSS-egenskaper relaterade till animation

Den här artikeln förklarar CSS-egenskaper relaterade till animationer.

Du kan lära dig om användning och syntax för egenskaperna @keyframes, animation och transition.

YouTube Video

HTML för förhandsgranskning

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 och övergång

@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 används i CSS-animationer för att specificera hur stilar ändras under animationen. I @keyframes specificeras stiländringar från början till slutet av animationen med tidsprocent eller nyckelord (from och to).

  • Det här är ett exempel på en animation där ett element glider från vänster till höger och återgår till sin ursprungliga position.
  • I det här exemplet skrivs slide efter @keyframes, vilket definierar en animation som heter slide.
  • 0% är början av animationen, där translateX(0) placerar elementet på dess ursprungliga plats.
  • 50% är mittpunkten i animationen, där elementet flyttas 200px till höger med translateX(200px).
  • 100% är slutet av animationen, där elementet återgår till sin ursprungliga position.
  • I box-animation-slide-klassen används animation-egenskapen för att applicera slide-animationen med 3-sekundersintervall.
 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 detaljerat styra stilarna under en animation. Genom att specificera procent kan du tillämpa olika stilar vid godtyckliga tidpunkter.
    • I det här exemplet ändras färgen gradvis från röd till blå till grön till gul och tillbaka till 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 det här exemplet motsvarar from 0% och to motsvarar 100%. Detta gör det möjligt att definiera enkla animationer.

Grundläggande 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: Namnet på animationen. Detta anges med hjälp av egenskapen animation eller animation-name.
  • Procent eller nyckelord: Använd procent från 0% till 100%, eller nyckelorden from (motsvarar 0%) och to (motsvarar 100%).

animation-egenskap 

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}

Egenskapen animation används för att tillämpa animationer på ett element. Animationer definierar hur en uppsättning CSS-stilar förändras över tid. Med egenskapen animation kan du kontrollera tidspunkten, beteendet, fördröjningen, antalet repetitioner och mer av en animation.

  • Klassen box-animation-ease-in-out specificerar slide som animation-name och använder animationen slide definierad i @keyframes.
    • 3s är animation-duration, vilket betyder att varje animationscykel avslutas på 3 sekunder.
    • ease-in-out är animation-timing-function, vilket gör att animationen börjar långsamt, accelererar och sedan saktar ner igen i slutet.
    • infinite är animation-iteration-count, vilket innebär att animationen kommer att upprepas på obestämd 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}
  • Klassen box-animation-alternate specificerar color-change som animation-name och använder animationen color-change definierad i @keyframes.
    • 1s som följer efter ease-in-out är animation-delay, vilket specificerar fördröjningen innan animationen startar. Animationen startar 1 sekund senare.
    • 3 som följer efter 1s är animation-iteration-count, vilket betyder att animationen upprepas 3 gånger.
    • alternate är animation-direction, vilket specificerar riktningen för animationsuppspelningen. alternate specificerar att animationen spelas upp växelvis.

Sammansättning av egenskapen animation

Egenskapen animation är en kortkommandoproperty som kombinerar flera under-egenskaper till en. Här är de viktigaste under-egenskaperna:.

  • Egenskapen animation-name: Specificerar namnet på animationen som ska tillämpas. Den måste matcha namnet på animationen som är definierad i @keyframes.
  • Egenskapen animation-duration: Specificerar tiden det tar för animationen att slutföra en cykel. Tidsenheterna är sekunder (s) eller millisekunder (ms).
  • Egenskapen animation-timing-function: Specificerar hastighetskurvan för animationen. Värden som ease, linear, ease-in, ease-out, ease-in-out, etc. används.
    • Att specificera ease gör att animationen börjar långsamt, snabbar upp och sedan saktar ner igen i slutet.
    • Att specificera linear gör att animationen fortskrider med en konstant hastighet från början till slut.
    • Att specificera ease-in gör att animationen börjar långsamt och slutar snabbt.
    • Att specificera ease-out gör att animationen börjar snabbt och slutar långsamt.
    • Att specificera ease-in-out gör att animationen börjar långsamt, går snabbt framåt och slutar långsamt.
  • Egenskapen animation-delay specificerar fördröjningen innan animationen startar. Tidsenheten är antingen sekunder eller millisekunder.
  • Egenskapen animation-iteration-count specificerar antalet gånger animationen ska upprepas. Att specificera infinite gör att animationen upprepas på obestämd tid.
  • Egenskapen animation-direction specificerar riktningen för animationens uppspelning. Alternativ inkluderar normal (framåt), reverse (bakåt), alternate (spela växelvis), och alternate-reverse (spela växelvis med start bakåt).
  • Egenskapen animation-fill-mode specificerar animationens tillstånd före den startar och efter den slutar. Du kan specificera något av none, forwards, backwards eller both.
  • Egenskapen animation-play-state specificerar om animationen körs eller är pausad. Du kan specificera running eller paused.

Sammanfattning

Egenskapen animation är ett kraftfullt verktyg för att dynamiskt ändra elementens stil. Genom att använda @keyframes kan du definiera hur stilar ändras över tid och styra detaljerade beteenden för animationen med varje underliggande egenskap i animation.

transition-egenskapen 

 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 används för att applicera animationseffekter på ändringar i CSS-stilar. Den möjliggör mjuka övergångar vid tillståndsändringar som hover, focus, active, eller när stilar ändras dynamiskt med JavaScript.

Låt oss titta på ett exempel med klassen transition-box där bakgrundsfärgen ändras mjukt vid hover på en knapp. - I klassen transition-box applicerar transition-egenskapen en 2-sekunders övergång på ändringen av bakgrundsfärgen. Ändringen specificeras som ease, vilket gör den mjuk. - hover-pseudo-klassen ändrar bakgrundsfärgen från lightgray till steelblue när muspekaren hålls över knappen. Den här ändringen sker mjukt under de 2 sekunder som specificerats i klassen transition-box.

Det är möjligt att applicera transition på flera egenskaper samtidigt. - I exemplet med klassen transition-2-properties ändras bakgrundsfärgen på 5 sekunder och bredden på 0,5 sekunder.

Grundläggande syntax 

1/* Basic syntax of transition */
2transition: property duration timing-function delay;
  • property specificerar vilka CSS-egenskaper som animationen ska tillämpas på. Att specificera all tillämpar animationen på alla egenskaper.
  • duration specificerar tiden det tar för animationen att slutföras. Ange med sekunder (s) eller millisekunder (ms).
  • timing-function specificerar förändringen i animationens hastighet. Du kan använda alternativ som ease, linear, ease-in, ease-out, ease-in-out, etc.
  • delay specificerar fördröjningstiden innan animationen startar. Ange i sekunder eller millisekunder.

Detaljerade egenskaper för transition 

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

transition kan också användas som individuella egenskaper enligt följande.

  • transition-property: Specificerar egenskapen som animationen tillämpas på.
  • transition-duration: Specificerar tiden tills animationen är slutförd.
  • transition-timing-function: Specificerar animationens hastighetsprogression. Alternativ som ease, linear, ease-in, ease-out, ease-in-out kan användas.
  • transition-delay: Specificerar fördröjningstiden innan animationen startar.

Du kan följa med i artikeln ovan med hjälp av Visual Studio Code på vår YouTube-kanal. Vänligen kolla även in YouTube-kanalen.

YouTube Video

CSS-egenskaper relaterade till filtereffekterCSS-egenskaper relaterade till 3D-animation