{"id":257548,"date":"2023-08-13T09:06:00","date_gmt":"2023-08-13T06:06:00","guid":{"rendered":"https:\/\/inform.click\/gjor-nettsidene-dine-levende-med-css-animasjoner-og-overganger\/"},"modified":"2023-08-13T09:20:00","modified_gmt":"2023-08-13T06:20:00","slug":"gjor-nettsidene-dine-levende-med-css-animasjoner-og-overganger","status":"publish","type":"post","link":"https:\/\/inform.click\/no\/gjor-nettsidene-dine-levende-med-css-animasjoner-og-overganger\/","title":{"rendered":"Gj\u00f8r nettsidene dine levende med CSS-animasjoner og overganger"},"content":{"rendered":"

\n Nettsidedesign er i stadig utvikling. Fra responsiv design, vakker typografi, perfekte fargekodingsskjemaer, illustrasjoner, kommer nettsideskaperne med nye ideer og design hver dag.\n<\/p>\n

\n Brukere i dag har h\u00f8ye forventninger til brukergrensesnittene p\u00e5 grunn av slik h\u00f8ykvalitets innhold tilgjengelig over internett. Ettersom nettsidegrensesnittene utvikler seg, utvikler teknologien bak dem. En hovedkomponent som er ansvarlig for \u00e5 forbedre nettstedets grensesnitt er CSS<\/strong>.\n<\/p>\n

\n CSS eller Cascading Style Sheets er ansvarlige for \u00e5 gj\u00f8re nettsteder mye interaktive ved \u00e5 definere stil, layout og design. Den nyeste standarden for CSS, det vil si, CSS3 har introdusert konseptet med animasjoner<\/strong> og transformasjoner<\/strong> som forbedrer brukeropplevelsen ved \u00e5 legge til ekstra dybde til brukergrensesnittet. Med CSS-animasjoner og overganger kan du fortelle historier, skape overd\u00e5dige effekter og gj\u00f8re brukerinteraksjon med nettstedet ditt mye effektivt og meningsfylt.\n<\/p>\n

\n En animasjon er bare en simulering av bevegelse som skapes ved \u00e5 vise en serie objekter som bilder etter hverandre. Overgang, p\u00e5 den annen side, er i utgangspunktet en prosess der et objekt endres fra en tilstand til en annen. Men n\u00e5r vi snakker om nettanimasjoner er det i hovedsak tre typer \u2013 CSS-animasjoner<\/strong> eller keyframe-animasjoner, CSS-overganger<\/strong> og JavaScript-animasjoner<\/strong>.\n<\/p>\n

\n CSS-animasjoner\n<\/p>\n

\n For \u00e5 lage animasjoner i CSS m\u00e5 vi endre CSS-egenskapene til et element som et bilde eller en tekst, for en viss tidsperiode. Vi kan endre egenskapene til elementer s\u00e5 mange ganger vi vil, og kan ogs\u00e5 angi varigheten av animasjonen.\n<\/p>\n

\n Spesifiserer @keyframes
\n<\/h5>\n

\n CSS-animasjoner er definert bit med keyframes. Disse n\u00f8kkelbildene er de mellomliggende punktene i animasjonen. Alle CSS-animasjonene er spesifisert under @keyframes-regelen. Disse n\u00f8kkelbildene spesifiserer hva som skjer med elementet i et bestemt \u00f8yeblikk, dvs.\n<\/p>\n

    \n
  • hvilke egenskaper som endrer seg\n <\/li>\n
  • n\u00e5r elementet animerer\n <\/li>\n
  • hvordan elementet animerer\n <\/li>\n<\/ul>\n

    \n Du kan definere din egen n\u00f8kkelramme som:\n<\/p>\n

    @keyframes animation_name\n{\nfrom{ property: value; }\nto{ property: value; }\n}<\/code><\/pre>\n
    \n  Her spesifiserer 'til' og ‘fra' starten og slutten av animasjonen. Vi kan ogs\u00e5 spesifisere animasjoner for mellomliggende \u00f8yeblikk mellom start og slutt slik:\n<\/p>\n
    @keyframes name\n{\n0%{ property: value; }\n50%{ property: value; }\n100%{ property: value; }\n}<\/code><\/pre>\n
    \n  Her representerer 0 % starten p\u00e5 animasjonen, 100 % representerer slutten av animasjonen, og 50 % betyr endringen mellom starten og slutten. Men hvordan forteller vi nettleseren hvor lang tid animasjon skal finne sted? Vi gj\u00f8r dette ved hjelp av visse animasjonsegenskaper<\/strong>. Disse animasjonsegenskapene er knyttet til elementet som skal animeres. For eksempel:\n<\/p>\n
    element_name\n{\nanimation_property: value;\nstyle_property: value;\n}<\/code><\/pre>\n
    \n  Her kan elementet v\u00e6re en hvilken som helst HTML-tag som div, span, img, p osv. og style_property<\/code>er en hvilken som helst CSS-stilegenskap som background_color, width, height osv. La oss n\u00e5 se p\u00e5 noen animasjonsegenskaper i detaljer.\n<\/p>\n
      \n
    1. \n    @keyframes<\/strong>: Keyframes brukes til \u00e5 spesifisere animasjonskoden som diskutert ovenfor.\n  <\/li>\n
    2. \n    animasjonsnavn<\/strong>: Navnet spesifisert med @keyframes er navnet p\u00e5 animasjonen. Dette navnet brukes til \u00e5 referere til n\u00f8kkelbildene med elementet som skal animeres.\n  <\/li>\n
    3. \n    animasjon-varighet<\/strong>: Den brukes til \u00e5 spesifisere varigheten av animasjonen i sekunder eller millisekunder. For eksempel, hvis vi setter den til 5 sekunder, vil animasjonen bare kj\u00f8re i 5 sekunder. Hvis vi ikke angir denne egenskapen, vil ikke animasjonen kj\u00f8re i det hele tatt ettersom standardverdien er 0.\n  <\/li>\n
    4. \n    animation-delay<\/strong>: Vi kan utsette starten av animasjonen ved \u00e5 spesifisere animasjonsforsinkelsestid. For eksempel, hvis du \u00f8nsker \u00e5 starte animasjonen 5 sekunder etter at siden er lastet inn i nettleseren, setter du bare animasjonsforsinkelsen til 5s.\n  <\/li>\n
    5. \n    animation-direction<\/strong>: Vi kan fortelle nettleseren om en animasjon beveger seg i motsatt retning eller veksler med denne egenskapen. For eksempel, hvis du vil at animasjonen skal kj\u00f8re fra start til slutt, m\u00e5 du angi verdien for animasjon-varighet som «normal». Hvis du vil at den skal kj\u00f8re fra ende til start, er det bare \u00e5 sette verdien til ‘revers'.\n  <\/li>\n
    6. \n    animation-fill-mode<\/strong>: Vi kan spesifisere stilen til elementet n\u00e5r animasjonen ikke spiller med denne modusen, dvs. n\u00e5r animasjonen er forsinket eller ferdig, hva skal stilen til elementet v\u00e6re.\n  <\/li>\n
    7. \n    animation-iteration-count<\/strong>: Antall ganger en animasjon kan spilles er representert av denne egenskapen. For eksempel, hvis du vil spille av animasjonen en gang, sett den til 1, eller hvis du vil at animasjonen skal spille for alltid, sett den bare til «uendelig».\n  <\/li>\n
    8. \n    animation-timing-function<\/strong>: Denne egenskapen brukes til \u00e5 spesifisere hastighetskurven for animasjon som line\u00e6r, akselerasjon eller de-akselerasjon.\n  <\/li>\n
    9. \n    Animasjon<\/strong>: Det er stenografiegenskapen for \u00e5 angi alle animasjonsegenskapene.\n  <\/li>\n<\/ol>\n
      \n  Du kan for eksempel animere et sprettobjekt med f\u00f8lgende kodebit. Legg merke til hvordan stenografinotasjon for animasjon har blitt brukt her.\n<\/p>\n
      @keyframes slide {\n 0% {\n  left: 0;\n  top: 0;\n }\n 50% {\n  left: 244px;\n  top: 100px;\n }\n 100% {\n  left: 488px;\n  top: 0;\n }\n}\n \n.stage:hover .object {\n animation: slide 2s linear;    \/*shorthand animation property*\/\n}\n \n.object {\n background: #2db34a;\n border-radius: 50%;\n height: 50px;\n position: absolute;\n width: 50px;\n}<\/code><\/pre>\n
      \n  Overganger
      \n<\/h3>\n
      \n  CSS-overganger brukes p\u00e5 egenskaper til elementer for en viss varighet av tid basert p\u00e5 visse tidsfunksjoner,<\/strong> ogs\u00e5 kalt lettelsesfunksjoner. Med tidsfunksjon, mener vi en funksjon som vil endre egenskapene til elementene fra en tilstand til en annen som line\u00e6r progresjon, akselerasjon eller de-akselerasjon. Du har kanskje lagt merke til at et bilde glir eller forvandles til et annet bilde ved \u00e5 holde musepekeren eller en lyd spilles av ved museklikk. Dette er alle overgangseffekter som kan gj\u00f8re et nettsted interaktivt.\n<\/p>\n
      \n  Forenklingsfunksjoner<\/strong> er viktige for \u00e5 skape overganger. De spesifiserer hvordan egenskapene vil endre seg. De kan ogs\u00e5 endre hastigheten med hvilken verdien av eiendommer endres fra startpunktet til sluttpunktet for en overgang. Du kan bruke overganger p\u00e5 f\u00f8lgende m\u00e5te:\n<\/p>\n
      element\n{\nstyle_property: value;\ntransition_property: value;\n}<\/code><\/pre>\n
      \n  Her spesifiserer element HTML-elementet du vil transformere som div, H1, img osv. style_property er CSS-stilen som brukes p\u00e5 det elementet. La oss n\u00e5 se p\u00e5 noen overgangsegenskaper<\/strong> :\n<\/p>\n