[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"9_t0YFtO844PW3-iCfPxRTbw8yv0-2zzu2bChZFenjo":3,"btz8hO-MXSFLpybqvfjYVBre4OvrEJO1wFySe3Zmv-s":49,"RjmDbwBBnQMJyLRk56dJtQggvsFcjgT7uiE7JsZRbX0":75,"gSSVRA-QjrNZNVdPQRSlF1lPXYwwAAIjZZVFpF83jLI":160,"_apollo:default":205},{"menu":4},{"__typename":5,"id":6,"name":7,"items":8},"Menu","nuxt-main-menu","Nuxt Hauptmenü",[9,24,29,34,39,44],{"__typename":10,"id":11,"title":12,"description":13,"url":14,"langcode":15,"internal":20,"expanded":21,"attributes":22},"MenuItem","9ffc5019-cbd8-4b2e-8eb7-9feae486d4a1","Blog",null,"/know-how",{"__typename":16,"id":17,"name":18,"direction":19},"Language","de","German","ltr",true,false,{"__typename":23,"class":13},"MenuItemAttributes",{"__typename":10,"id":25,"title":26,"description":13,"url":27,"langcode":15,"internal":20,"expanded":21,"attributes":28},"1c7a5430-8a42-4b24-9544-252adabc2f4c","Projekte","/projekte",{"__typename":23,"class":13},{"__typename":10,"id":30,"title":31,"description":13,"url":32,"langcode":15,"internal":20,"expanded":21,"attributes":33},"9c4feedc-79e4-4fbf-b68c-065f33ebfe4c","Sparring","/workshop-ux-sparring-fuer-unternehmen",{"__typename":23,"class":13},{"__typename":10,"id":35,"title":36,"description":13,"url":37,"langcode":15,"internal":20,"expanded":21,"attributes":38},"3b77a27b-272a-489f-843e-53e23ed07741","Trainings","/liechtenecker-ux-academy",{"__typename":23,"class":13},{"__typename":10,"id":40,"title":41,"description":13,"url":42,"langcode":15,"internal":20,"expanded":21,"attributes":43},"ce0bb82b-e1ee-4036-be95-f693a62e9f4a","Über uns","/about",{"__typename":23,"class":13},{"__typename":10,"id":45,"title":46,"description":13,"url":47,"langcode":15,"internal":20,"expanded":21,"attributes":48},"04a19381-81a9-4694-8653-182d8855d2b5","Kontakt","/kontakt",{"__typename":23,"class":13},{"menu":50},{"__typename":5,"id":51,"name":52,"items":53},"footer","Fußzeile",[54,60,65,70],{"__typename":10,"id":55,"title":56,"description":13,"url":57,"langcode":58,"internal":20,"expanded":21,"attributes":59},"e2873307-b50a-4aab-b6b2-1950fd99c72e","Impressum","/impressum",{"__typename":16,"id":17,"name":18,"direction":19},{"__typename":23,"class":13},{"__typename":10,"id":61,"title":62,"description":13,"url":63,"langcode":58,"internal":20,"expanded":21,"attributes":64},"2cd9b7c9-142a-4ea3-b898-a0952c54a195","Datenschutz","/datenschutz",{"__typename":23,"class":13},{"__typename":10,"id":66,"title":67,"description":13,"url":68,"langcode":58,"internal":20,"expanded":21,"attributes":69},"a5effba3-5a8c-4125-8d78-0cdba09824db","AGB","/agb",{"__typename":23,"class":13},{"__typename":10,"id":71,"title":72,"description":13,"url":73,"langcode":58,"internal":21,"expanded":21,"attributes":74},"114bf071-bdbb-44cf-85c1-69e9d9e0777d","Newsletter","https://liechtenecker.at/newsletter-subscribe",{"__typename":23,"class":13},{"route":76},{"__typename":77,"entity":78},"RouteInternal",{"__typename":79,"id":80,"title":81,"changed":82,"created":88,"langcode":89,"path":90,"promote":21,"status":20,"sticky":21,"metatag":91,"postCategory":111,"postContentElements":13,"evergreen":13,"tags":136,"postWpBody":150,"wpHeaderImage":13,"wpHeaderImageOld":13,"wpHeaderImageOldSmall":13,"wpOgImage":13,"wpPromotedTeaserImage":13,"wpShareDescription":13,"wpShareTitle":13,"wpTeaserText":13,"wpYoastHead":153,"author":154},"NodeWpPost","991","Bildanimationen mit CSS",{"__typename":83,"timestamp":84,"timezone":85,"offset":86,"time":87},"DateTime",1404367228,"UTC","+00:00","2014-07-03T06:00:28+00:00",{"__typename":83,"timestamp":84,"timezone":85,"offset":86,"time":87},{"__typename":16,"id":17,"name":18,"direction":19},"/blog/bildanimationen-mit-css",[92,99,106],{"__typename":93,"tag":94,"attributes":95},"MetaTagValue","meta",{"__typename":96,"name":97,"content":98},"MetaTagValueAttributes","title","Bildanimationen mit CSS | Liechtenecker UX Design Studio",{"__typename":100,"tag":101,"attributes":102},"MetaTagLink","link",{"__typename":103,"href":104,"hreflang":13,"rel":105,"media":13,"sizes":13,"type":13},"MetaTagLinkAttributes","http://liechtenecker-cms.liechtenecker-cms.svc.cluster.local/blog/bildanimationen-mit-css","canonical",{"__typename":107,"tag":94,"attributes":108},"MetaTagProperty",{"__typename":109,"property":110,"content":81},"MetaTagPropertyAttributes","og:title",{"__typename":112,"id":113,"name":114,"path":115,"status":20,"weight":116,"description":117,"langcode":121,"changed":122,"metatag":125},"TermCategories","8","UX/UI Design","/kategorie/design",0,{"__typename":118,"processed":119,"format":120},"Text","Themen aus dem Bereich Design & User Experience","wp_html",{"__typename":16,"id":17,"name":18,"direction":19},{"__typename":83,"timestamp":123,"timezone":85,"offset":86,"time":124},1713772777,"2024-04-22T07:59:37+00:00",[126,129,133],{"__typename":93,"tag":94,"attributes":127},{"__typename":96,"name":97,"content":128},"UX/UI Design | Liechtenecker UX Design Studio",{"__typename":93,"tag":94,"attributes":130},{"__typename":96,"name":131,"content":132},"description","Themen aus dem Bereich Design & User Experience",{"__typename":100,"tag":101,"attributes":134},{"__typename":103,"href":135,"hreflang":13,"rel":105,"media":13,"sizes":13,"type":13},"http://liechtenecker-cms.liechtenecker-cms.svc.cluster.local/kategorie/design",[137,142,146],{"__typename":138,"id":139,"name":140,"path":141,"weight":116},"TermTags","82","Animation","/tag/animation",{"__typename":138,"id":143,"name":144,"path":145,"weight":116},"160","bildanimation","/tag/bildanimation",{"__typename":138,"id":147,"name":148,"path":149,"weight":116},"297","css3","/tag/css3",{"__typename":151,"processed":152,"format":120,"summary":13},"TextSummary","\u003Cdiv class=\"grid-wrapper\">\n    \u003Cdiv class=\"row\">\n        \u003Cdiv class=\"default-left col-xsmall-12 col-medium-6 col-medium-offset-2 col-large-6 col-large-offset-3 \">\n            \n\u003Cstyle>\n@-moz-keyframes bird{20%{left:-100px;top:55%;-moz-transform:rotate(0deg);transform:rotate(0deg);-moz-transform:scale(1,1);transform:scale(1,1);filter:blur(2px)}40%{left:110%;top:15%;-moz-transform:rotate(-45deg);transform:rotate(-45deg);-moz-transform:scale(1,1);transform:scale(1,1);filter:blur(2px)}60%{left:110%;top:35%;-moz-transform:scale(0.25,.25);transform:scale(0.25,.25);filter:blur(0px)}95%{left:-100%;top:25%;-moz-transform:scale(0.25,.25);transform:scale(0.25,.25)}}@-webkit-keyframes bird{20%{left:-100px;top:55%;-webkit-transform:rotate(0deg);transform:rotate(0deg);-webkit-transform:scale(1,1);transform:scale(1,1);-webkit-filter:blur(2px);filter:blur(2px)}40%{left:110%;top:15%;-webkit-transform:rotate(-45deg);transform:rotate(-45deg);-webkit-transform:scale(1,1);transform:scale(1,1);-webkit-filter:blur(2px);filter:blur(2px)}60%{left:110%;top:35%;-webkit-transform:scale(0.25,.25);transform:scale(0.25,.25);-webkit-filter:blur(0px);filter:blur(0px)}95%{left:-100%;top:25%;-webkit-transform:scale(0.25,.25);transform:scale(0.25,.25)}}@keyframes bird{20%{left:-100px;top:55%;-moz-transform:rotate(0deg);-ms-transform:rotate(0deg);-webkit-transform:rotate(0deg);transform:rotate(0deg);-moz-transform:scale(1,1);-ms-transform:scale(1,1);-webkit-transform:scale(1,1);transform:scale(1,1);-webkit-filter:blur(2px);filter:blur(2px)}40%{left:110%;top:15%;-moz-transform:rotate(-45deg);-ms-transform:rotate(-45deg);-webkit-transform:rotate(-45deg);transform:rotate(-45deg);-moz-transform:scale(1,1);-ms-transform:scale(1,1);-webkit-transform:scale(1,1);transform:scale(1,1);-webkit-filter:blur(2px);filter:blur(2px)}60%{left:110%;top:35%;-moz-transform:scale(0.25,.25);-ms-transform:scale(0.25,.25);-webkit-transform:scale(0.25,.25);transform:scale(0.25,.25);-webkit-filter:blur(0px);filter:blur(0px)}95%{left:-100%;top:25%;-moz-transform:scale(0.25,.25);-ms-transform:scale(0.25,.25);-webkit-transform:scale(0.25,.25);transform:scale(0.25,.25)}}@-moz-keyframes flare{0%,80%{opacity:0}90%{opacity:1}100%{opacity:0}}@-webkit-keyframes flare{0%,80%{opacity:0}90%{opacity:1}100%{opacity:0}}@keyframes flare{0%,80%{opacity:0}90%{opacity:1}100%{opacity:0}}@-moz-keyframes flaretwo{0%{opacity:.1}10%{opacity:.15}30%{opacity:.1}50%{opacity:.25}70%{opacity:0}90%{opacity:.35}100%{opacity:0}}@-webkit-keyframes flaretwo{0%{opacity:.1}10%{opacity:.15}30%{opacity:.1}50%{opacity:.25}70%{opacity:0}90%{opacity:.35}100%{opacity:0}}@keyframes flaretwo{0%{opacity:.1}10%{opacity:.15}30%{opacity:.1}50%{opacity:.25}70%{opacity:0}90%{opacity:.35}100%{opacity:0}}@-moz-keyframes balloon{0%{top:15%;left:60%}25%{top:10%;left:61%}50%{top:15%;left:59%}75%{top:10%;left:60%}100%{top:15%;left:61%}}@-webkit-keyframes balloon{0%{top:15%;left:60%}25%{top:10%;left:61%}50%{top:15%;left:59%}75%{top:10%;left:60%}100%{top:15%;left:61%}}@keyframes balloon{0%{top:15%;left:60%}25%{top:10%;left:61%}50%{top:15%;left:59%}75%{top:10%;left:60%}100%{top:15%;left:61%}}body,html{padding:0;margin:0}.animation-container{overflow:hidden;position:relative}.animation-container img.main{display:block;width:100%;height:auto}.animation-container img.anim{position:absolute;width:100%;height:auto;top:0;z-index:5}.flare{-moz-animation:flare 4s infinite;-webkit-animation:flare 4s infinite;animation:flare 4s infinite}.flare2{-moz-animation:flaretwo 6s infinite;-webkit-animation:flaretwo 6s infinite;animation:flaretwo 6s infinite}.bird{-moz-animation:bird 10s infinite linear;-webkit-animation:bird 10s infinite linear;animation:bird 10s infinite linear;position:absolute;left:-100px;top:75%;z-index:10}.balloon{-moz-animation:balloon 16s infinite;-webkit-animation:balloon 16s infinite;animation:balloon 16s infinite;position:absolute;left:60%;z-index:3}\n\u003C/style>\n\u003Cp class=\"animation-container\">Das Bewegtbild ist aus dem Internet nicht mehr wegzudenken. Spätestens nach dem Aufkommen von Videoheadern – also vollformatigen Videos als Hintergrund von Webseiten – und der Renaissance von animierten GIFs ist immer mehr Inhalt auf Webseiten in Bewegung. Mit einer wenig beachteten Möglichkeit, subtile Animationen zu erzeugen und dabei die Nachteile von Videos und GIFs zu umgehen, werde ich mich in diesem Blogbeitrag beschäftigen: CSS Animationen in Bildern.\u003C/p>\n\u003Cdiv class=\"animation-container\">\u003C/div>\n\u003Ch2 class=\"animation-container\">CSS Animationen\u003C/h2>\n\u003Cp>Bei CSS Animationen in Bildern wird zunächst das zu animierende Element mit einem Bildeditor freigestellt. Das Konzept hinter diesen Animationen beruht auf dem Prinzip, einige Bildelemente mittels CSS3 zu bewegen, zu drehen & mit Effekten (z.b. Blur) zu belegen, um so einem sonst statischen Bild Dynamik zu verleihen. Die Ästhetik solcher Bilder ähnelt derer von \u003Ca href=\"http://www.demilked.com/cinemagraphs-by-jamie-beck-and-kevin-burg-part-i/\" target=\"_blank\" rel=\"noopener noreferrer\">Cinemagraphs\u003C/a>, also GIFs, bei denen kleine, isolierte Bereiche eines Bildes in einer Endlosschleife abgespielt werden, während sich der Rest des Bildes nicht bewegt.\u003C/p>\n\u003Cdiv class=\"animation-container\">\u003Cdiv data-entity-type=\"media\" data-entity-uuid=\"c3e59c40-3253-4e78-b5a2-09ffd42c6c9b\" data-langcode=\"de\" class=\"embedded-entity\">\u003Cdiv>\n  \n  \n  \u003Cdiv>\n    \u003Cdiv class=\"visually-hidden\">Bild\u003C/div>\n              \u003Cdiv>    \u003Cpicture>\n                  \u003Csource srcset=\"/sites/default/files/styles/image_width_medium/public/wp-migration/wordpress-media-image/2014/06/image021-1.jpg.webp?itok=jX7HljyF 1x, /sites/default/files/styles/image_width_medium_x2/public/wp-migration/wordpress-media-image/2014/06/image021-1.jpg.webp?itok=deMYQ9Zh 2x\" media=\"all and (min-width: 1024px) and (max-width: 1439px)\" type=\"image/webp\" width=\"1000\" height=\"531\">\n              \u003Csource srcset=\"/sites/default/files/styles/image_width_small/public/wp-migration/wordpress-media-image/2014/06/image021-1.jpg.webp?itok=K8xsuyfb 1x, /sites/default/files/styles/image_width_small_x2/public/wp-migration/wordpress-media-image/2014/06/image021-1.jpg.webp?itok=amOf8KD0 2x\" media=\"all and (min-width: 745px) and (max-width: 1023px)\" type=\"image/webp\" width=\"1000\" height=\"531\">\n              \u003Csource srcset=\"/sites/default/files/styles/image_width_xsmall/public/wp-migration/wordpress-media-image/2014/06/image021-1.jpg.webp?itok=Ko6pX8aB 1x, /sites/default/files/styles/image_width_xsmall_x2/public/wp-migration/wordpress-media-image/2014/06/image021-1.jpg.webp?itok=UTtsDQa0 2x\" media=\"all and (min-width: 480px) and (max-width: 744px)\" type=\"image/webp\" width=\"745\" height=\"396\">\n              \u003Csource srcset=\"/sites/default/files/styles/image_width_xxsmall/public/wp-migration/wordpress-media-image/2014/06/image021-1.jpg.webp?itok=-FCW30pQ 1x, /sites/default/files/styles/image_width_xxsmall_x2/public/wp-migration/wordpress-media-image/2014/06/image021-1.jpg.webp?itok=wvw835Bw 2x\" media=\"all and (max-width: 479px)\" type=\"image/webp\" width=\"480\" height=\"255\">\n              \u003Csource srcset=\"/sites/default/files/styles/image_width_large/public/wp-migration/wordpress-media-image/2014/06/image021-1.jpg.webp?itok=Nei6FMGX 1x, /sites/default/files/styles/image_width_large_x2/public/wp-migration/wordpress-media-image/2014/06/image021-1.jpg.webp?itok=6q-niFWF 2x\" type=\"image/webp\" width=\"1000\" height=\"531\">\n                  \u003Cimg loading=\"lazy\" width=\"1000\" height=\"531\" src=\"/sites/default/files/styles/image_width_large_x2/public/wp-migration/wordpress-media-image/2014/06/image021-1.jpg.jpg?itok=6q-niFWF\" alt=\"Stimmungsbild\" title=\"Stimmungsbild\">\n\n  \u003C/picture>\n\n\u003C/div>\n          \u003C/div>\n\n\u003C/div>\n\u003C/div>\n\u003Cdiv data-entity-type=\"media\" data-entity-uuid=\"eaeb3a2a-6690-4e57-bee4-af5336156f44\" data-langcode=\"de\" class=\"embedded-entity\">\u003Cdiv>\n  \n  \n  \u003Cdiv>\n    \u003Cdiv class=\"visually-hidden\">Bild\u003C/div>\n              \u003Cdiv>    \u003Cpicture>\n                  \u003Csource srcset=\"/sites/default/files/styles/image_width_medium/public/wp-migration/wordpress-media-image/2014/06/ballon1-1.png.webp?itok=LpTg_Puk 1x, /sites/default/files/styles/image_width_medium_x2/public/wp-migration/wordpress-media-image/2014/06/ballon1-1.png.webp?itok=-icJ7OCG 2x\" media=\"all and (min-width: 1024px) and (max-width: 1439px)\" type=\"image/webp\" width=\"90\" height=\"116\">\n              \u003Csource srcset=\"/sites/default/files/styles/image_width_small/public/wp-migration/wordpress-media-image/2014/06/ballon1-1.png.webp?itok=NfP0Xo3s 1x, /sites/default/files/styles/image_width_small_x2/public/wp-migration/wordpress-media-image/2014/06/ballon1-1.png.webp?itok=BQT65RaH 2x\" media=\"all and (min-width: 745px) and (max-width: 1023px)\" type=\"image/webp\" width=\"90\" height=\"116\">\n              \u003Csource srcset=\"/sites/default/files/styles/image_width_xsmall/public/wp-migration/wordpress-media-image/2014/06/ballon1-1.png.webp?itok=R_dKRTux 1x, /sites/default/files/styles/image_width_xsmall_x2/public/wp-migration/wordpress-media-image/2014/06/ballon1-1.png.webp?itok=PPWOY49o 2x\" media=\"all and (min-width: 480px) and (max-width: 744px)\" type=\"image/webp\" width=\"90\" height=\"116\">\n              \u003Csource srcset=\"/sites/default/files/styles/image_width_xxsmall/public/wp-migration/wordpress-media-image/2014/06/ballon1-1.png.webp?itok=VWSwTZFq 1x, /sites/default/files/styles/image_width_xxsmall_x2/public/wp-migration/wordpress-media-image/2014/06/ballon1-1.png.webp?itok=Y9OSuayR 2x\" media=\"all and (max-width: 479px)\" type=\"image/webp\" width=\"90\" height=\"116\">\n              \u003Csource srcset=\"/sites/default/files/styles/image_width_large/public/wp-migration/wordpress-media-image/2014/06/ballon1-1.png.webp?itok=gYuR-HFN 1x, /sites/default/files/styles/image_width_large_x2/public/wp-migration/wordpress-media-image/2014/06/ballon1-1.png.webp?itok=QKuE8imz 2x\" type=\"image/webp\" width=\"90\" height=\"116\">\n                  \u003Cimg loading=\"lazy\" width=\"90\" height=\"116\" src=\"/sites/default/files/styles/image_width_large_x2/public/wp-migration/wordpress-media-image/2014/06/ballon1-1.png.jpg?itok=QKuE8imz\" alt=\"Ballon\" title=\"Ballon\">\n\n  \u003C/picture>\n\n\u003C/div>\n          \u003C/div>\n\n\u003C/div>\n\u003C/div>\n\u003Cdiv data-entity-type=\"media\" data-entity-uuid=\"a597fbd0-7a32-41dc-87f6-ad2849d36084\" data-langcode=\"de\" class=\"embedded-entity\">\u003Cdiv>\n  \n  \n  \u003Cdiv>\n    \u003Cdiv class=\"visually-hidden\">Bild\u003C/div>\n              \u003Cdiv>    \u003Cpicture>\n                  \u003Csource srcset=\"/sites/default/files/styles/image_width_medium/public/wp-migration/wordpress-media-image/2014/06/flare021-1.png.webp?itok=BXFo25g_ 1x, /sites/default/files/styles/image_width_medium_x2/public/wp-migration/wordpress-media-image/2014/06/flare021-1.png.webp?itok=9K1n5E5B 2x\" media=\"all and (min-width: 1024px) and (max-width: 1439px)\" type=\"image/webp\" width=\"1000\" height=\"531\">\n              \u003Csource srcset=\"/sites/default/files/styles/image_width_small/public/wp-migration/wordpress-media-image/2014/06/flare021-1.png.webp?itok=xr0HDNWy 1x, /sites/default/files/styles/image_width_small_x2/public/wp-migration/wordpress-media-image/2014/06/flare021-1.png.webp?itok=vpYOa865 2x\" media=\"all and (min-width: 745px) and (max-width: 1023px)\" type=\"image/webp\" width=\"1000\" height=\"531\">\n              \u003Csource srcset=\"/sites/default/files/styles/image_width_xsmall/public/wp-migration/wordpress-media-image/2014/06/flare021-1.png.webp?itok=GTW82vzQ 1x, /sites/default/files/styles/image_width_xsmall_x2/public/wp-migration/wordpress-media-image/2014/06/flare021-1.png.webp?itok=ER3LOJDX 2x\" media=\"all and (min-width: 480px) and (max-width: 744px)\" type=\"image/webp\" width=\"745\" height=\"396\">\n              \u003Csource srcset=\"/sites/default/files/styles/image_width_xxsmall/public/wp-migration/wordpress-media-image/2014/06/flare021-1.png.webp?itok=RdbhFp4W 1x, /sites/default/files/styles/image_width_xxsmall_x2/public/wp-migration/wordpress-media-image/2014/06/flare021-1.png.webp?itok=_ATSUQw2 2x\" media=\"all and (max-width: 479px)\" type=\"image/webp\" width=\"480\" height=\"255\">\n              \u003Csource srcset=\"/sites/default/files/styles/image_width_large/public/wp-migration/wordpress-media-image/2014/06/flare021-1.png.webp?itok=_A1ONzV5 1x, /sites/default/files/styles/image_width_large_x2/public/wp-migration/wordpress-media-image/2014/06/flare021-1.png.webp?itok=57noOQBK 2x\" type=\"image/webp\" width=\"1000\" height=\"531\">\n                  \u003Cimg loading=\"lazy\" width=\"1000\" height=\"531\" src=\"/sites/default/files/styles/image_width_large_x2/public/wp-migration/wordpress-media-image/2014/06/flare021-1.png.jpg?itok=57noOQBK\" alt=\"Stimmungsbild\" title=\"Stimmungsbild\">\n\n  \u003C/picture>\n\n\u003C/div>\n          \u003C/div>\n\n\u003C/div>\n\u003C/div>\n\u003C/div>\n\u003Cp class=\"animation-container\">Die Limitationen dieser Technik werden im Beispiel offensichtlich: Anders als bei Videos oder animierten GIFs wirkt die Szene trotz Animation eher statisch. Realistische Verformungen oder z.B. perspektivische Wechsel der animierten Objekte wäre nur sehr schwer zu realisieren.\u003C/p>\n\u003Cdiv class=\"animation-container\">\u003C/div>\n\u003Cdiv class=\"animation-container\">\n\u003Ch2 class=\"animation-container\">Vorteile gegenüber Videos & animierten GIFs\u003C/h2>\n\u003Cp>Um genauer auf die Vorteile dieser Technik gegenüber den anderen Möglichkeiten einzugehen, müssen wir uns kurz mit der Technik hinter diesen Methoden beschäftigen. GIFs sind eine (bezogen auf das Alter des Internets) sehr alte Methode, Bewegtbild ins Netz zu bringen. Ein animiertes GIF beinhaltet mehrere, voneinander komplett unabhängige Bilder, die in einer vom Autor definierten Geschwindigkeit hintereinander abgespielt werden. GIFs können nur 256 Farben beinhalten, sind aber durch die Vielzahl an aufeinanderfolgenden Bildern dennoch relativ gr0ß (eine kurze Szene in kleiner Auflösung kann schnell einige Megabyte haben) – also nicht ideal für das Internet.\u003Cbr>\nVideos basieren auf dem selben Konzept, haben aber einen entscheidenden Vorteil: Während die Frames bei GIFs unabhängig voneinander abgespeichert sind, bauen die einzelnen Frames von Videos aufeinander auf und sparen damit sehr viel Speicherplatz (Diesen Umstand macht sich auch \u003Ca href=\"http://blog.embed.ly/post/89265229166/what-twitter-isnt-telling-you-about-gifs\" target=\"_blank\" rel=\"noopener noreferrer\">Twitter zu nutze\u003C/a>, und wandelt animierte GIFs beim Hochladen in Videos um).\n\u003C/p>\u003C/div>\n\u003Cdiv class=\"animation-container\">\u003C/div>\n\u003Cdiv data-entity-type=\"media\" data-entity-uuid=\"42f0cc78-df43-4b6f-827b-91d9cfa30f26\" data-langcode=\"de\" class=\"embedded-entity\">\u003Cdiv>\n  \n  \n  \u003Cdiv>\n    \u003Cdiv class=\"visually-hidden\">Bild\u003C/div>\n              \u003Cdiv>    \u003Cpicture>\n                  \u003Csource srcset=\"/sites/default/files/styles/image_width_medium/public/wp-migration/wordpress-media-image/2014/06/vogel1-1.png.webp?itok=WvvS4kyN 1x, /sites/default/files/styles/image_width_medium_x2/public/wp-migration/wordpress-media-image/2014/06/vogel1-1.png.webp?itok=zY1R5GqG 2x\" media=\"all and (min-width: 1024px) and (max-width: 1439px)\" type=\"image/webp\" width=\"92\" height=\"53\">\n              \u003Csource srcset=\"/sites/default/files/styles/image_width_small/public/wp-migration/wordpress-media-image/2014/06/vogel1-1.png.webp?itok=i4r2ylCa 1x, /sites/default/files/styles/image_width_small_x2/public/wp-migration/wordpress-media-image/2014/06/vogel1-1.png.webp?itok=pWMG2O3h 2x\" media=\"all and (min-width: 745px) and (max-width: 1023px)\" type=\"image/webp\" width=\"92\" height=\"53\">\n              \u003Csource srcset=\"/sites/default/files/styles/image_width_xsmall/public/wp-migration/wordpress-media-image/2014/06/vogel1-1.png.webp?itok=l7Qeb06- 1x, /sites/default/files/styles/image_width_xsmall_x2/public/wp-migration/wordpress-media-image/2014/06/vogel1-1.png.webp?itok=l9KtTr0l 2x\" media=\"all and (min-width: 480px) and (max-width: 744px)\" type=\"image/webp\" width=\"92\" height=\"53\">\n              \u003Csource srcset=\"/sites/default/files/styles/image_width_xxsmall/public/wp-migration/wordpress-media-image/2014/06/vogel1-1.png.webp?itok=X_1o9TLS 1x, /sites/default/files/styles/image_width_xxsmall_x2/public/wp-migration/wordpress-media-image/2014/06/vogel1-1.png.webp?itok=xX9n9PXN 2x\" media=\"all and (max-width: 479px)\" type=\"image/webp\" width=\"92\" height=\"53\">\n              \u003Csource srcset=\"/sites/default/files/styles/image_width_large/public/wp-migration/wordpress-media-image/2014/06/vogel1-1.png.webp?itok=AwWLRsPy 1x, /sites/default/files/styles/image_width_large_x2/public/wp-migration/wordpress-media-image/2014/06/vogel1-1.png.webp?itok=IEs51DCg 2x\" type=\"image/webp\" width=\"92\" height=\"53\">\n                  \u003Cimg loading=\"lazy\" width=\"92\" height=\"53\" src=\"/sites/default/files/styles/image_width_large_x2/public/wp-migration/wordpress-media-image/2014/06/vogel1-1.png.jpg?itok=IEs51DCg\" alt=\"vogel\" title=\"vogel\">\n\n  \u003C/picture>\n\n\u003C/div>\n          \u003C/div>\n\n\u003C/div>\n\u003C/div>\n\u003Cdiv data-entity-type=\"media\" data-entity-uuid=\"f1e4f536-1147-48ac-b885-e2f765dabd1d\" data-langcode=\"de\" class=\"embedded-entity\">\u003Cdiv>\n  \n  \n  \u003Cdiv>\n    \u003Cdiv class=\"visually-hidden\">Bild\u003C/div>\n              \u003Cdiv>    \u003Cpicture>\n                  \u003Csource srcset=\"/sites/default/files/styles/image_width_medium/public/wp-migration/wordpress-media-image/2014/06/image011-1.jpg.webp?itok=OUmmTPRx 1x, /sites/default/files/styles/image_width_medium_x2/public/wp-migration/wordpress-media-image/2014/06/image011-1.jpg.webp?itok=pnzEbRtf 2x\" media=\"all and (min-width: 1024px) and (max-width: 1439px)\" type=\"image/webp\" width=\"1000\" height=\"531\">\n              \u003Csource srcset=\"/sites/default/files/styles/image_width_small/public/wp-migration/wordpress-media-image/2014/06/image011-1.jpg.webp?itok=tmxbVI7d 1x, /sites/default/files/styles/image_width_small_x2/public/wp-migration/wordpress-media-image/2014/06/image011-1.jpg.webp?itok=5kOmxbTv 2x\" media=\"all and (min-width: 745px) and (max-width: 1023px)\" type=\"image/webp\" width=\"1000\" height=\"531\">\n              \u003Csource srcset=\"/sites/default/files/styles/image_width_xsmall/public/wp-migration/wordpress-media-image/2014/06/image011-1.jpg.webp?itok=RMEVgqM_ 1x, /sites/default/files/styles/image_width_xsmall_x2/public/wp-migration/wordpress-media-image/2014/06/image011-1.jpg.webp?itok=1j-b6GOd 2x\" media=\"all and (min-width: 480px) and (max-width: 744px)\" type=\"image/webp\" width=\"745\" height=\"396\">\n              \u003Csource srcset=\"/sites/default/files/styles/image_width_xxsmall/public/wp-migration/wordpress-media-image/2014/06/image011-1.jpg.webp?itok=MHG9mCjn 1x, /sites/default/files/styles/image_width_xxsmall_x2/public/wp-migration/wordpress-media-image/2014/06/image011-1.jpg.webp?itok=dQLJNg4v 2x\" media=\"all and (max-width: 479px)\" type=\"image/webp\" width=\"480\" height=\"255\">\n              \u003Csource srcset=\"/sites/default/files/styles/image_width_large/public/wp-migration/wordpress-media-image/2014/06/image011-1.jpg.webp?itok=jWo5sGCf 1x, /sites/default/files/styles/image_width_large_x2/public/wp-migration/wordpress-media-image/2014/06/image011-1.jpg.webp?itok=eBN5uJ_y 2x\" type=\"image/webp\" width=\"1000\" height=\"531\">\n                  \u003Cimg loading=\"lazy\" width=\"1000\" height=\"531\" src=\"/sites/default/files/styles/image_width_large_x2/public/wp-migration/wordpress-media-image/2014/06/image011-1.jpg.jpg?itok=eBN5uJ_y\" alt=\"Processed with VSCOcam with b5 preset\" title=\"Processed with VSCOcam with b5 preset\">\n\n  \u003C/picture>\n\n\u003C/div>\n          \u003C/div>\n\n\u003C/div>\n\u003C/div>\n\u003Cdiv data-entity-type=\"media\" data-entity-uuid=\"ca594f68-eb9f-4289-8c3b-2ed5cd43d7b7\" data-langcode=\"de\" class=\"embedded-entity\">\u003Cdiv>\n  \n  \n  \u003Cdiv>\n    \u003Cdiv class=\"visually-hidden\">Bild\u003C/div>\n              \u003Cdiv>    \u003Cpicture>\n                  \u003Csource srcset=\"/sites/default/files/styles/image_width_medium/public/wp-migration/wordpress-media-image/2014/06/flare011-1.jpg.webp?itok=3D7dfdLH 1x, /sites/default/files/styles/image_width_medium_x2/public/wp-migration/wordpress-media-image/2014/06/flare011-1.jpg.webp?itok=WhGAK8tJ 2x\" media=\"all and (min-width: 1024px) and (max-width: 1439px)\" type=\"image/webp\" width=\"1000\" height=\"531\">\n              \u003Csource srcset=\"/sites/default/files/styles/image_width_small/public/wp-migration/wordpress-media-image/2014/06/flare011-1.jpg.webp?itok=qfs8_R_0 1x, /sites/default/files/styles/image_width_small_x2/public/wp-migration/wordpress-media-image/2014/06/flare011-1.jpg.webp?itok=hOmBASpp 2x\" media=\"all and (min-width: 745px) and (max-width: 1023px)\" type=\"image/webp\" width=\"1000\" height=\"531\">\n              \u003Csource srcset=\"/sites/default/files/styles/image_width_xsmall/public/wp-migration/wordpress-media-image/2014/06/flare011-1.jpg.webp?itok=dfuqUI4i 1x, /sites/default/files/styles/image_width_xsmall_x2/public/wp-migration/wordpress-media-image/2014/06/flare011-1.jpg.webp?itok=9nCIXnNN 2x\" media=\"all and (min-width: 480px) and (max-width: 744px)\" type=\"image/webp\" width=\"745\" height=\"396\">\n              \u003Csource srcset=\"/sites/default/files/styles/image_width_xxsmall/public/wp-migration/wordpress-media-image/2014/06/flare011-1.jpg.webp?itok=761H2yrq 1x, /sites/default/files/styles/image_width_xxsmall_x2/public/wp-migration/wordpress-media-image/2014/06/flare011-1.jpg.webp?itok=XOIk1C7F 2x\" media=\"all and (max-width: 479px)\" type=\"image/webp\" width=\"480\" height=\"255\">\n              \u003Csource srcset=\"/sites/default/files/styles/image_width_large/public/wp-migration/wordpress-media-image/2014/06/flare011-1.jpg.webp?itok=zK-cUM10 1x, /sites/default/files/styles/image_width_large_x2/public/wp-migration/wordpress-media-image/2014/06/flare011-1.jpg.webp?itok=fkn-YKO9 2x\" type=\"image/webp\" width=\"1000\" height=\"531\">\n                  \u003Cimg loading=\"lazy\" width=\"1000\" height=\"531\" src=\"/sites/default/files/styles/image_width_large_x2/public/wp-migration/wordpress-media-image/2014/06/flare011-1.jpg.jpg?itok=fkn-YKO9\" alt=\"Processed with VSCOcam with b5 preset\" title=\"Processed with VSCOcam with b5 preset\">\n\n  \u003C/picture>\n\n\u003C/div>\n          \u003C/div>\n\n\u003C/div>\n\u003C/div>\n\u003Cp class=\"animation-container\">\u003C/p>\n\u003Cp class=\"animation-container\">CSS Animationen in Bildern bestehen im Normalfall aus einem einzigen Bild und kleinen, freigestellten Elementen die seperat abgespeichert sind. Der wirkliche Vorteil dieser Technik liegt daher in der Größe der erzeugten Animationen.\u003C/p>\n\u003Ch2 class=\"animation-container\">Aufwendige Erstellung\u003C/h2>\n\u003Cp>Die Erstellung von CSS Animationen ist vor allem zeitaufwendig und benötigt je nach Motiv Fertigkeit bei der Bildretusche. Durch die speziellen Anforderungen an Motiv und zu animierendes Objekt eignen sich nur wenige Bilder für CSS Animationen. Auch die realistische Bewegung des Objekts mit CSS3 ist nicht immer einfach.\u003Cbr>\nÜberall wo die Bandbreite knapp ist und ein Videoheader nicht aus konzeptioneller oder ästhetischer Sicht unumgänglich ist sind CSS Bildanimationen aber eine sehr gute Alternative, um die Webseite etwas dynamischer erscheinen zu lassen.\u003Cbr>\nVor allem in Zukunft werden es CSS Animationen aber eher schwer haben: Die ständige Weiterentwicklung und Verbesserung von Videoformaten wird immer kleinere und qualitativ bessere Videos hervorbringen. Auch die Komplexität der Erstellung die Einiges an Fachwissen voraussetzt und sehr aufwendig ist spricht auf lange Sicht gegen eine große Verbreitung dieser Technik.\u003C/p>\n\u003Cp class=\"animation-container\">\n        \u003C/p>\u003C/div>\n    \u003C/div>\n\u003C/div>\n\n\n","\u003C!-- This site is optimized with the Yoast SEO plugin v15.7 - https://yoast.com/wordpress/plugins/seo/ -->\n\u003Cmeta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" />\n\u003Clink rel=\"canonical\" href=\"https://legacy.liechtenecker.dev/blog/bildanimationen-mit-css/\" />\n\u003Cmeta property=\"og:locale\" content=\"de_DE\" />\n\u003Cmeta property=\"og:type\" content=\"article\" />\n\u003Cmeta property=\"og:title\" content=\"Bildanimationen mit CSS - Liechtenecker\" />\n\u003Cmeta property=\"og:description\" content=\"Das Bewegtbild ist aus dem Internet nicht mehr wegzudenken. Spätestens nach dem Aufkommen von Videoheadern – also vollformatigen Videos als Hintergrund von Webseiten – und der Renaissance von animierten GIFs ist immer mehr Inhalt auf Webseiten in Bewegung. Mit einer wenig beachteten Möglichkeit, subtile Animationen zu erzeugen und dabei die Nachteile von Videos und GIFs zu umgehen, werde […]\" />\n\u003Cmeta property=\"og:url\" content=\"https://legacy.liechtenecker.dev/blog/bildanimationen-mit-css/\" />\n\u003Cmeta property=\"og:site_name\" content=\"Liechtenecker\" />\n\u003Cmeta property=\"article:published_time\" content=\"2014-07-03T08:00:28+00:00\" />\n\u003Cmeta property=\"og:image\" content=\"https://legacy.liechtenecker.dev/wp-content/uploads/2014/06/image021-1.jpg\" />\n\u003Cmeta name=\"twitter:card\" content=\"summary_large_image\" />\n\u003Cmeta name=\"twitter:label1\" content=\"Geschätzte Lesezeit\">\n\t\u003Cmeta name=\"twitter:data1\" content=\"3 Minuten\">\n\u003Cscript type=\"application/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https://schema.org\",\"@graph\":[{\"@type\":\"WebSite\",\"@id\":\"https://legacy.liechtenecker.dev/#website\",\"url\":\"https://legacy.liechtenecker.dev/\",\"name\":\"Liechtenecker\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":\"https://legacy.liechtenecker.dev/?s={search_term_string}\",\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"de-DE\"},{\"@type\":\"ImageObject\",\"@id\":\"https://legacy.liechtenecker.dev/blog/bildanimationen-mit-css/#primaryimage\",\"inLanguage\":\"de-DE\",\"url\":\"https://legacy.liechtenecker.dev/wp-content/uploads/2014/06/image021-1.jpg\",\"width\":1000,\"height\":531,\"caption\":\"Stimmungsbild\"},{\"@type\":\"WebPage\",\"@id\":\"https://legacy.liechtenecker.dev/blog/bildanimationen-mit-css/#webpage\",\"url\":\"https://legacy.liechtenecker.dev/blog/bildanimationen-mit-css/\",\"name\":\"Bildanimationen mit CSS - Liechtenecker\",\"isPartOf\":{\"@id\":\"https://legacy.liechtenecker.dev/#website\"},\"primaryImageOfPage\":{\"@id\":\"https://legacy.liechtenecker.dev/blog/bildanimationen-mit-css/#primaryimage\"},\"datePublished\":\"2014-07-03T08:00:28+00:00\",\"dateModified\":\"2014-07-03T08:00:28+00:00\",\"author\":{\"@id\":\"https://legacy.liechtenecker.dev/#/schema/person/b24fd61d8a4acf49d8c56f320617f6ec\"},\"inLanguage\":\"de-DE\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https://legacy.liechtenecker.dev/blog/bildanimationen-mit-css/\"]}]},{\"@type\":\"Person\",\"@id\":\"https://legacy.liechtenecker.dev/#/schema/person/b24fd61d8a4acf49d8c56f320617f6ec\",\"name\":\"Stephan\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https://legacy.liechtenecker.dev/#personlogo\",\"inLanguage\":\"de-DE\",\"url\":\"https://secure.gravatar.com/avatar/400d5f8c531afb609b81aa66c8d56f01?s=96&d=mm&r=g\",\"caption\":\"Stephan\"}}]}\u003C/script>\n\u003C!-- / Yoast SEO plugin. -->",{"__typename":155,"id":156,"myRole":157,"name":158,"nickname":159},"User","23","langgedienter Frontend-Veteran","s-fletzberger","Stephan",{"latestKnowhow":161},[162,180,193],{"__typename":79,"id":163,"title":164,"path":165,"wpTeaserText":166,"wpPromotedTeaserImage":13,"wpHeaderImage":167},"1619","Behind the scenes: Ein Barrierefreiheits-Audit","/blog/behind-scenes-ein-barrierefreiheits-audit","”Entspricht unsere Website den gesetzlichen Anforderungen und wenn nicht, was genau müssen wir ändern?”\r\nDiese Frage lieben wir. Echt! Und so sieht unsere Antwort aus.",{"__typename":168,"id":169,"excludeFromScreenreader":13,"mediaImage":170,"name":178,"path":179,"status":20},"MediaImage","3364",{"__typename":171,"url":172,"width":173,"height":174,"alt":175,"title":13,"size":176,"mime":177},"Image","http://liechtenecker-cms.liechtenecker-cms.svc.cluster.local/sites/default/files/2026-04/Headerbilder%20Blogartikel%20Behind%20the%20scene%20Accessibility%20Audit.jpg",2880,1300,"Headline mit Sujet: Tastatur mit Symbolen für Barrierefreiheit im Fokus auf hellem  Hintergrund",838204,"image/jpeg","Headerbilder Blogartikel Behind the scene Accessibility Audit.jpg","/media/3364/edit",{"__typename":79,"id":181,"title":182,"path":183,"wpTeaserText":184,"wpPromotedTeaserImage":13,"wpHeaderImage":185},"1616","Agentic KI trifft Design-System: Wie unser Presentation Maker entstand.","/blog/agentic-ki-trifft-design-system-wie-unser-presentation-maker-entstand","Nein, wir wollen euch jetzt nicht erzählen, was KI alles kann. Aber wir möchten euch zeigen, wie wir mit KI umgehen. \r\n",{"__typename":168,"id":186,"excludeFromScreenreader":13,"mediaImage":187,"name":191,"path":192,"status":20},"3355",{"__typename":171,"url":188,"width":173,"height":174,"alt":189,"title":13,"size":190,"mime":177},"http://liechtenecker-cms.liechtenecker-cms.svc.cluster.local/sites/default/files/2026-03/BLOG_Presentation%20Tool_TITEL-2880x1300px_1.jpg","Lukas und Daniel  arbeiten an Computern im Büro.",2621988,"BLOG_Presentation Tool_TITEL-2880x1300px.jpg","/media/3355/edit",{"__typename":79,"id":194,"title":195,"path":196,"wpTeaserText":13,"wpPromotedTeaserImage":13,"wpHeaderImage":197},"1606","UI Trends 2026","/blog/ui-trends-2026",{"__typename":168,"id":198,"excludeFromScreenreader":21,"mediaImage":199,"name":203,"path":204,"status":20},"3303",{"__typename":171,"url":200,"width":173,"height":174,"alt":201,"title":13,"size":202,"mime":177},"http://liechtenecker-cms.liechtenecker-cms.svc.cluster.local/sites/default/files/2026-01/BLOG_Trendbericht%202026.jpg","UI Trends 2026, gelber Hintergrund, schwarze Schrift.",4700748,"BLOG_Trendbericht 2026.jpg","/media/3303/edit",{"Language:de":206,"MenuItem:9ffc5019-cbd8-4b2e-8eb7-9feae486d4a1":207,"MenuItem:1c7a5430-8a42-4b24-9544-252adabc2f4c":211,"MenuItem:9c4feedc-79e4-4fbf-b68c-065f33ebfe4c":214,"MenuItem:3b77a27b-272a-489f-843e-53e23ed07741":217,"MenuItem:ce0bb82b-e1ee-4036-be95-f693a62e9f4a":220,"MenuItem:04a19381-81a9-4694-8653-182d8855d2b5":223,"Menu:nuxt-main-menu":226,"ROOT_QUERY":240,"MenuItem:e2873307-b50a-4aab-b6b2-1950fd99c72e":256,"MenuItem:2cd9b7c9-142a-4ea3-b898-a0952c54a195":259,"MenuItem:a5effba3-5a8c-4125-8d78-0cdba09824db":262,"MenuItem:114bf071-bdbb-44cf-85c1-69e9d9e0777d":265,"Menu:footer":268,"TermCategories:8":278,"TermTags:82":289,"TermTags:160":290,"TermTags:297":291,"User:23":292,"NodeWpPost:991":293,"MediaImage:3364":316,"NodeWpPost:1619":318,"MediaImage:3355":321,"NodeWpPost:1616":323,"MediaImage:3303":326,"NodeWpPost:1606":328},["null","__typename",16,"id",17,"name",18,"direction",19],["null","__typename",10,"id",11,"title",12,"description",13,"url",14,"langcode",208,"internal",20,"expanded",21,"attributes",210],{"__ref":209},"Language:de",["null","__typename",23,"class",13],["null","__typename",10,"id",25,"title",26,"description",13,"url",27,"langcode",212,"internal",20,"expanded",21,"attributes",213],{"__ref":209},["null","__typename",23,"class",13],["null","__typename",10,"id",30,"title",31,"description",13,"url",32,"langcode",215,"internal",20,"expanded",21,"attributes",216],{"__ref":209},["null","__typename",23,"class",13],["null","__typename",10,"id",35,"title",36,"description",13,"url",37,"langcode",218,"internal",20,"expanded",21,"attributes",219],{"__ref":209},["null","__typename",23,"class",13],["null","__typename",10,"id",40,"title",41,"description",13,"url",42,"langcode",221,"internal",20,"expanded",21,"attributes",222],{"__ref":209},["null","__typename",23,"class",13],["null","__typename",10,"id",45,"title",46,"description",13,"url",47,"langcode",224,"internal",20,"expanded",21,"attributes",225],{"__ref":209},["null","__typename",23,"class",13],["null","__typename",5,"id",6,"name",7,"items",227],[228,230,232,234,236,238],{"__ref":229},"MenuItem:9ffc5019-cbd8-4b2e-8eb7-9feae486d4a1",{"__ref":231},"MenuItem:1c7a5430-8a42-4b24-9544-252adabc2f4c",{"__ref":233},"MenuItem:9c4feedc-79e4-4fbf-b68c-065f33ebfe4c",{"__ref":235},"MenuItem:3b77a27b-272a-489f-843e-53e23ed07741",{"__ref":237},"MenuItem:ce0bb82b-e1ee-4036-be95-f693a62e9f4a",{"__ref":239},"MenuItem:04a19381-81a9-4694-8653-182d8855d2b5",["null","__typename",241,"menu({\"name\":\"NUXT_MAIN_MENU\"})",242,"menu({\"name\":\"FOOTER\"})",244,"route({\"path\":\"/blog/bildanimationen-mit-css\"})",246,"latestKnowhow({\"excludeId\":\"991\",\"limit\":3})",249],"Query",{"__ref":243},"Menu:nuxt-main-menu",{"__ref":245},"Menu:footer",["null","__typename",77,"entity",247],{"__ref":248},"NodeWpPost:991",[250,252,254],{"__ref":251},"NodeWpPost:1619",{"__ref":253},"NodeWpPost:1616",{"__ref":255},"NodeWpPost:1606",["null","__typename",10,"id",55,"title",56,"description",13,"url",57,"langcode",257,"internal",20,"expanded",21,"attributes",258],{"__ref":209},["null","__typename",23,"class",13],["null","__typename",10,"id",61,"title",62,"description",13,"url",63,"langcode",260,"internal",20,"expanded",21,"attributes",261],{"__ref":209},["null","__typename",23,"class",13],["null","__typename",10,"id",66,"title",67,"description",13,"url",68,"langcode",263,"internal",20,"expanded",21,"attributes",264],{"__ref":209},["null","__typename",23,"class",13],["null","__typename",10,"id",71,"title",72,"description",13,"url",73,"langcode",266,"internal",21,"expanded",21,"attributes",267],{"__ref":209},["null","__typename",23,"class",13],["null","__typename",5,"id",51,"name",52,"items",269],[270,272,274,276],{"__ref":271},"MenuItem:e2873307-b50a-4aab-b6b2-1950fd99c72e",{"__ref":273},"MenuItem:2cd9b7c9-142a-4ea3-b898-a0952c54a195",{"__ref":275},"MenuItem:a5effba3-5a8c-4125-8d78-0cdba09824db",{"__ref":277},"MenuItem:114bf071-bdbb-44cf-85c1-69e9d9e0777d",["null","__typename",112,"id",113,"name",114,"path",115,"status",20,"weight",116,"description",279,"langcode",280,"changed",281,"metatag",282],["null","__typename",118,"processed",119,"format",120],{"__ref":209},["null","__typename",83,"timestamp",123,"timezone",85,"offset",86,"time",124],[283,285,287],["null","__typename",93,"tag",94,"attributes",284],["null","__typename",96,"name",97,"content",128],["null","__typename",93,"tag",94,"attributes",286],["null","__typename",96,"name",131,"content",132],["null","__typename",100,"tag",101,"attributes",288],["null","__typename",103,"href",135,"hreflang",13,"rel",105,"media",13,"sizes",13,"type",13],["null","__typename",138,"id",139,"name",140,"path",141,"weight",116],["null","__typename",138,"id",143,"name",144,"path",145,"weight",116],["null","__typename",138,"id",147,"name",148,"path",149,"weight",116],["null","__typename",155,"id",156,"myRole",157,"name",158,"nickname",159],["null","__typename",79,"id",80,"title",81,"changed",294,"created",295,"langcode",296,"path",90,"promote",21,"status",20,"sticky",21,"metatag",297,"category",304,"contentElements",13,"evergreen",13,"tags",306,"wpBody",313,"wpHeaderImage",13,"wpHeaderImageOld",13,"wpHeaderImageOldSmall",13,"wpOgImage",13,"wpPromotedTeaserImage",13,"wpShareDescription",13,"wpShareTitle",13,"wpTeaserText",13,"wpYoastHead",153,"author",314],["null","__typename",83,"timestamp",84,"timezone",85,"offset",86,"time",87],["null","__typename",83,"timestamp",84,"timezone",85,"offset",86,"time",87],{"__ref":209},[298,300,302],["null","__typename",93,"tag",94,"attributes",299],["null","__typename",96,"name",97,"content",98],["null","__typename",100,"tag",101,"attributes",301],["null","__typename",103,"href",104,"hreflang",13,"rel",105,"media",13,"sizes",13,"type",13],["null","__typename",107,"tag",94,"attributes",303],["null","__typename",109,"property",110,"content",81],{"__ref":305},"TermCategories:8",[307,309,311],{"__ref":308},"TermTags:82",{"__ref":310},"TermTags:160",{"__ref":312},"TermTags:297",["null","__typename",151,"processed",152,"format",120,"summary",13],{"__ref":315},"User:23",["null","__typename",168,"id",169,"excludeFromScreenreader",13,"mediaImage",317,"name",178,"path",179,"status",20],["null","__typename",171,"url",172,"width",173,"height",174,"alt",175,"title",13,"size",176,"mime",177],["null","__typename",79,"id",163,"title",164,"path",165,"wpTeaserText",166,"wpPromotedTeaserImage",13,"wpHeaderImage",319],{"__ref":320},"MediaImage:3364",["null","__typename",168,"id",186,"excludeFromScreenreader",13,"mediaImage",322,"name",191,"path",192,"status",20],["null","__typename",171,"url",188,"width",173,"height",174,"alt",189,"title",13,"size",190,"mime",177],["null","__typename",79,"id",181,"title",182,"path",183,"wpTeaserText",184,"wpPromotedTeaserImage",13,"wpHeaderImage",324],{"__ref":325},"MediaImage:3355",["null","__typename",168,"id",198,"excludeFromScreenreader",21,"mediaImage",327,"name",203,"path",204,"status",20],["null","__typename",171,"url",200,"width",173,"height",174,"alt",201,"title",13,"size",202,"mime",177],["null","__typename",79,"id",194,"title",195,"path",196,"wpTeaserText",13,"wpPromotedTeaserImage",13,"wpHeaderImage",329],{"__ref":330},"MediaImage:3303"]