{"id":265401,"date":"2023-08-13T09:06:00","date_gmt":"2023-08-13T06:06:00","guid":{"rendered":"https:\/\/inform.click\/ge-dina-webbsidor-liv-med-css-animationer-och-overgangar\/"},"modified":"2023-08-13T09:06:00","modified_gmt":"2023-08-13T06:06:00","slug":"ge-dina-webbsidor-liv-med-css-animationer-och-overgangar","status":"publish","type":"post","link":"https:\/\/inform.click\/sv\/ge-dina-webbsidor-liv-med-css-animationer-och-overgangar\/","title":{"rendered":"Ge dina webbsidor liv med CSS-animationer och \u00f6verg\u00e5ngar"},"content":{"rendered":"

\n Webbplatsdesigner utvecklas st\u00e4ndigt. Fr\u00e5n responsiv design, vacker typografi, perfekta f\u00e4rgkodningsscheman, illustrationer, kommer webbplatsskaparna med nya id\u00e9er och design varje dag.\n<\/p>\n

\n Anv\u00e4ndare nuf\u00f6rtiden har h\u00f6ga f\u00f6rv\u00e4ntningar p\u00e5 anv\u00e4ndargr\u00e4nssnitten p\u00e5 grund av s\u00e5dant h\u00f6gkvalitativt inneh\u00e5ll som \u00e4r tillg\u00e4ngligt \u00f6ver internet. I takt med att webbplatsens gr\u00e4nssnitt utvecklas s\u00e5 \u00e4r tekniken bakom dem. En viktig komponent som \u00e4r ansvarig f\u00f6r att f\u00f6rb\u00e4ttra webbplatsens gr\u00e4nssnitt \u00e4r CSS<\/strong>.\n<\/p>\n

\n CSS eller Cascading Style Sheets \u00e4r ansvariga f\u00f6r att g\u00f6ra webbplatser mycket interaktiva genom att definiera deras stil, layout, design. Den senaste standarden f\u00f6r CSS, det vill s\u00e4ga CSS3 har introducerat konceptet med animationer<\/strong> och transformationer<\/strong> som f\u00f6rb\u00e4ttrar anv\u00e4ndarupplevelsen genom att l\u00e4gga till extra djup till anv\u00e4ndargr\u00e4nssnittet. Med CSS-animationer och \u00f6verg\u00e5ngar kan du ber\u00e4tta historier, skapa \u00f6verd\u00e5diga effekter och g\u00f6ra anv\u00e4ndarinteraktion med din webbplats mycket effektiv och meningsfull.\n<\/p>\n

\n En animation \u00e4r bara en simulering av r\u00f6relse som skapas genom att visa en serie objekt som bilder efter varandra. \u00d6verg\u00e5ng, \u00e5 andra sidan, \u00e4r i grunden en process d\u00e4r ett objekt \u00e4ndras fr\u00e5n ett tillst\u00e5nd till ett annat. Men n\u00e4r vi pratar om webbanimationer finns det i grunden tre typer \u2013 CSS-animationer<\/strong> eller keyframe-animationer, CSS-\u00f6verg\u00e5ngar<\/strong> och JavaScript-animationer<\/strong>.\n<\/p>\n

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

\n F\u00f6r att skapa animationer i CSS m\u00e5ste vi \u00e4ndra CSS-egenskaperna f\u00f6r ett element som en bild eller text, under en viss tidsperiod. Vi kan \u00e4ndra egenskaperna f\u00f6r element s\u00e5 m\u00e5nga g\u00e5nger vi vill och kan ocks\u00e5 st\u00e4lla in varaktigheten f\u00f6r animeringen.\n<\/p>\n

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

\n CSS-animationer definieras bitvis med nyckelbildrutor. Dessa nyckelbildrutor \u00e4r de mellanliggande punkterna f\u00f6r animering. Alla CSS-animationer specificeras under @keyframes-regeln. Dessa nyckelbildrutor anger vad som h\u00e4nder med elementet vid ett visst \u00f6gonblick, dvs.\n<\/p>\n

    \n
  • vilka egenskaper som f\u00f6r\u00e4ndras\n <\/li>\n
  • n\u00e4r elementet animeras\n <\/li>\n
  • hur elementet animerar\n <\/li>\n<\/ul>\n

    \n Du kan definiera din egen nyckelbildruta som:\n<\/p>\n

    @keyframes animation_name\n{\nfrom{ property: value; }\nto{ property: value; }\n}<\/code><\/pre>\n
    \n  H\u00e4r anger ”till” och ”fr\u00e5n” b\u00f6rjan och slutet av animationen. Vi kan ocks\u00e5 specificera animationer f\u00f6r mellanliggande \u00f6gonblick mellan start och slut s\u00e5 h\u00e4r:\n<\/p>\n
    @keyframes name\n{\n0%{ property: value; }\n50%{ property: value; }\n100%{ property: value; }\n}<\/code><\/pre>\n
    \n  H\u00e4r representerar 0 % b\u00f6rjan av animeringen, 100 % representerar slutet av animeringen och 50 % representerar f\u00f6r\u00e4ndringen mellan b\u00f6rjan och slutet. Men hur ber\u00e4ttar vi f\u00f6r webbl\u00e4saren hur l\u00e5ng tid animering ska ske? Det g\u00f6r vi med hj\u00e4lp av vissa animationsegenskaper<\/strong>. Dessa animeringsegenskaper \u00e4r associerade med elementet som ska animeras. Till exempel:\n<\/p>\n
    element_name\n{\nanimation_property: value;\nstyle_property: value;\n}<\/code><\/pre>\n
    \n  H\u00e4r kan elementet vara vilken HTML-tagg som helst som div, span, img, p etc. och style_property<\/code>\u00e4r vilken CSS-stilegenskap som helst som background_color, width, height etc. L\u00e5t oss nu titta p\u00e5 n\u00e5gra animationsegenskaper i detalj.\n<\/p>\n
      \n
    1. \n    @keyframes<\/strong>: Keyframes anv\u00e4nds f\u00f6r att specificera animeringskoden som diskuterats ovan.\n  <\/li>\n
    2. \n    animation-name<\/strong>: Namnet som anges med @keyframes \u00e4r namnet p\u00e5 animationen. Detta namn anv\u00e4nds f\u00f6r att referera till nyckelbildrutor med elementet som ska animeras.\n  <\/li>\n
    3. \n    animation-duration<\/strong>: Den anv\u00e4nds f\u00f6r att ange varaktigheten av animationen i sekunder eller millisekunder. Om vi \u200b\u200btill exempel st\u00e4ller in den p\u00e5 5 sekunder kommer animeringen endast att k\u00f6ras i 5 sekunder. Om vi \u200b\u200binte st\u00e4ller in den h\u00e4r egenskapen kommer animeringen inte att k\u00f6ras alls eftersom dess standardv\u00e4rde \u00e4r 0.\n  <\/li>\n
    4. \n    animation-delay<\/strong>: Vi kan f\u00f6rdr\u00f6ja starten av animeringen genom att ange animationsf\u00f6rdr\u00f6jningstid. Om du till exempel vill starta animeringen 5 sekunder efter att sidan har laddats i webbl\u00e4saren, st\u00e4ll bara in animationsf\u00f6rdr\u00f6jning till 5s.\n  <\/li>\n
    5. \n    animation-direction<\/strong>: Vi kan tala om f\u00f6r webbl\u00e4saren om en animation r\u00f6r sig i motsatt riktning eller omv\u00e4xlande cykler med den h\u00e4r egenskapen. Om du till exempel vill att animationen ska k\u00f6ras fr\u00e5n b\u00f6rjan till slut, st\u00e4ll in v\u00e4rdet f\u00f6r animation-duration som ”normalt”. Om du vill att den ska k\u00f6ras fr\u00e5n slut till start st\u00e4ller du bara in v\u00e4rdet p\u00e5 ”omv\u00e4nd”.\n  <\/li>\n
    6. \n    animation-fill-mode<\/strong>: Vi kan specificera stilen f\u00f6r elementet n\u00e4r animeringen inte spelar med detta l\u00e4ge, dvs n\u00e4r animeringen \u00e4r f\u00f6rsenad eller avslutad, vad ska stilen p\u00e5 elementet vara.\n  <\/li>\n
    7. \n    animation-iteration-count<\/strong>: Antalet g\u00e5nger en animation kan spelas representeras av denna egenskap. Om du till exempel vill spela animationen en g\u00e5ng st\u00e4ll in den p\u00e5 1, eller om du vill att animeringen ska spelas f\u00f6r alltid, st\u00e4ll bara in den p\u00e5 ”o\u00e4ndlig”.\n  <\/li>\n
    8. \n    animation-timing-function<\/strong>: Den h\u00e4r egenskapen anv\u00e4nds f\u00f6r att specificera hastighetskurvan f\u00f6r animering som linj\u00e4r, acceleration eller deacceleration.\n  <\/li>\n
    9. \n    Animation<\/strong>: Det \u00e4r f\u00f6rkortningsegenskapen f\u00f6r att st\u00e4lla in alla animeringsegenskaper.\n  <\/li>\n<\/ol>\n
      \n  Du kan till exempel animera ett studsande objekt med f\u00f6ljande kodavsnitt. L\u00e4gg m\u00e4rke till hur stenografisk notation f\u00f6r animering har anv\u00e4nts h\u00e4r.\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  \u00d6verg\u00e5ngar
      \n<\/h3>\n
      \n  CSS-\u00f6verg\u00e5ngar till\u00e4mpas p\u00e5 egenskaper hos element under en viss tidsperiod baserat p\u00e5 vissa tidsfunktioner,<\/strong> \u00e4ven f\u00f6renklingsfunktioner. Med tidsfunktion menar vi en funktion som kommer att \u00e4ndra egenskaperna hos elementen fr\u00e5n ett tillst\u00e5nd till ett annat som linj\u00e4r progression, acceleration eller deacceleration. Du kanske har m\u00e4rkt att en bild glider eller f\u00f6rvandlas till en annan bild n\u00e4r du h\u00e5ller muspekaren eller att ett ljud spelas upp vid musklick. Dessa \u00e4r alla \u00f6verg\u00e5ngseffekter som kan g\u00f6ra en webbplats interaktiv.\n<\/p>\n
      \n  L\u00e4ttnadsfunktioner<\/strong> \u00e4r viktiga f\u00f6r att skapa \u00f6verg\u00e5ngar. De anger hur egenskaperna kommer att f\u00f6r\u00e4ndras. De kan ocks\u00e5 \u00e4ndra hastigheten med vilken v\u00e4rdet p\u00e5 fastigheter \u00e4ndras fr\u00e5n startpunkten till slutpunkten f\u00f6r en \u00f6verg\u00e5ng. Du kan till\u00e4mpa \u00f6verg\u00e5ngar p\u00e5 f\u00f6ljande s\u00e4tt:\n<\/p>\n
      element\n{\nstyle_property: value;\ntransition_property: value;\n}<\/code><\/pre>\n
      \n  H\u00e4r anger element HTML-elementet du vill transformera som div, H1, img etc. style_property \u00e4r CSS-stilen som till\u00e4mpas p\u00e5 det elementet. L\u00e5t oss nu titta p\u00e5 n\u00e5gra \u00f6verg\u00e5ngsegenskaper<\/strong> :\n<\/p>\n