[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"btz8hO-MXSFLpybqvfjYVBre4OvrEJO1wFySe3Zmv-s":3,"9_t0YFtO844PW3-iCfPxRTbw8yv0-2zzu2bChZFenjo":39,"u3TsZ6ZV_58XIzXCbvQPC3ii6-7whD_dA-LLu3ULAY8":75,"B19g9tW7TAkpPAawFPutdHU6UeKnRp-AoWBgKY_OZX4":172,"_apollo:default":214},{"menu":4},{"__typename":5,"id":6,"name":7,"items":8},"Menu","footer","Fußzeile",[9,24,29,34],{"__typename":10,"id":11,"title":12,"description":13,"url":14,"langcode":15,"internal":20,"expanded":21,"attributes":22},"MenuItem","e2873307-b50a-4aab-b6b2-1950fd99c72e","Impressum",null,"/impressum",{"__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},"2cd9b7c9-142a-4ea3-b898-a0952c54a195","Datenschutz","/datenschutz",{"__typename":23,"class":13},{"__typename":10,"id":30,"title":31,"description":13,"url":32,"langcode":15,"internal":20,"expanded":21,"attributes":33},"a5effba3-5a8c-4125-8d78-0cdba09824db","AGB","/agb",{"__typename":23,"class":13},{"__typename":10,"id":35,"title":36,"description":13,"url":37,"langcode":15,"internal":21,"expanded":21,"attributes":38},"114bf071-bdbb-44cf-85c1-69e9d9e0777d","Newsletter","https://liechtenecker.at/newsletter-subscribe",{"__typename":23,"class":13},{"menu":40},{"__typename":5,"id":41,"name":42,"items":43},"nuxt-main-menu","Nuxt Hauptmenü",[44,50,55,60,65,70],{"__typename":10,"id":45,"title":46,"description":13,"url":47,"langcode":48,"internal":20,"expanded":21,"attributes":49},"9ffc5019-cbd8-4b2e-8eb7-9feae486d4a1","Blog","/know-how",{"__typename":16,"id":17,"name":18,"direction":19},{"__typename":23,"class":13},{"__typename":10,"id":51,"title":52,"description":13,"url":53,"langcode":48,"internal":20,"expanded":21,"attributes":54},"1c7a5430-8a42-4b24-9544-252adabc2f4c","Projekte","/projekte",{"__typename":23,"class":13},{"__typename":10,"id":56,"title":57,"description":13,"url":58,"langcode":48,"internal":20,"expanded":21,"attributes":59},"9c4feedc-79e4-4fbf-b68c-065f33ebfe4c","Sparring","/workshop-ux-sparring-fuer-unternehmen",{"__typename":23,"class":13},{"__typename":10,"id":61,"title":62,"description":13,"url":63,"langcode":48,"internal":20,"expanded":21,"attributes":64},"3b77a27b-272a-489f-843e-53e23ed07741","Trainings","/liechtenecker-ux-academy",{"__typename":23,"class":13},{"__typename":10,"id":66,"title":67,"description":13,"url":68,"langcode":48,"internal":20,"expanded":21,"attributes":69},"ce0bb82b-e1ee-4036-be95-f693a62e9f4a","Über uns","/about",{"__typename":23,"class":13},{"__typename":10,"id":71,"title":72,"description":13,"url":73,"langcode":48,"internal":20,"expanded":21,"attributes":74},"04a19381-81a9-4694-8653-182d8855d2b5","Kontakt","/kontakt",{"__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":153,"wpHeaderImageOldSmall":13,"wpOgImage":13,"wpPromotedTeaserImage":13,"wpShareDescription":13,"wpShareTitle":13,"wpTeaserText":13,"wpYoastHead":165,"author":166},"NodeWpPost","1103","HTML5 und CSS3 Animationen",{"__typename":83,"timestamp":84,"timezone":85,"offset":86,"time":87},"DateTime",1341567896,"UTC","+00:00","2012-07-06T09:44:56+00:00",{"__typename":83,"timestamp":84,"timezone":85,"offset":86,"time":87},{"__typename":16,"id":17,"name":18,"direction":19},"/blog/html5-und-css3-animationen",[92,99,106],{"__typename":93,"tag":94,"attributes":95},"MetaTagValue","meta",{"__typename":96,"name":97,"content":98},"MetaTagValueAttributes","title","HTML5 und CSS3 Animationen | 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/html5-und-css3-animationen","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},"297","css3","/tag/css3",{"__typename":138,"id":147,"name":148,"path":149,"weight":116},"604","html5","/tag/html5",{"__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\u003Cp>HTML5 und CSS3 Animationen im Web gehört die Zukunft. Dieser Artikel geht kurz auf die Geschichte ein, beschreibt dann den heutigen Stand und geht auf die Verbreitung von Browsern ein und gibt einen Überblick über Tools, die zur Erstellung von Animationen benutzt werden können.\u003C/p>\n\u003Ch3>Geschichte\u003C/h3>\n\u003Cp>Animierte Objekte auf Webseiten sind beinahe so alt wie das Internet selbst. Alles begann mit dem Netscape Navigator in Version 1.0 (1994). Die Entwickler von Netscape nahmen damals ein nicht dokumentiertes HTML-Element, das <blink>-Element, in Netscape auf. Auch wenn dieses nur die rudimentärste Form einer Animation unterstützte – Anzeige oder keine Anzeige – kann man dennoch von einem der ersten animierten Objekte im Web sprechen.\u003Cbr>\nZunächst als Easter-Egg gedacht, wurde das Element schnell zu einem Internet-Phänomen, vergleichbar mit dem 1995 im Internet Explorer 1.0 eingeführten, ebenfalls undokumentierten <marquee>-Element.\u003Cbr>\nZunächst waren Animationen also auf reine Texteffekte beschränkt. Dies sollte sich mit der Einführung von Netscape 2 (1996) ändern. Netscape 2.0 unterstützte erstmalig GIF-Animation – sich drehende Erdkugeln und sich bewegende Strichmännchen bevölkerten ab dann zunehmend Webseiten.\u003Cbr>\nAuch JavaScript Animationen haben in Netscape 2.0 ihren Ursprung: Netscape 2.0 führte JavaScript 1.0 ein, welches über die Funktion setTimeout verfügte – ein erster Schritt in Richtung Animtion. Allerdings waren JavaScript Animationen damals kaum praktikabel, da sie vor allem durch die Geschwindigkeit der damaligen Computer stark ausgebremst wurden.\u003Cbr>\nUngefähr zur selben Zeit wurde FutureWave Software von Macromedia gekauft und FutureSplash Animator wurde zu Macromedia Flash. Damit begannen ein fulminanter Aufstieg für Flash. Zwar entwickelten sich auch HTML und CSS rasant weiter, Flash konnte aber vor allem die Nische für Animationen, Spiele und Videoplayer im Web erfolgreich besetzen, da sich die Entwicklung von HTML und CSS zunächst auf das Wesentlichste konzentrierte. Adobe kaufte Macromedia 2005 – Flash befand sich damals in der Blütezeit.\u003Cbr>\nAber auch die Entwicklung von HTML und CSS Schritt schnell voran. Der erste Draft von HTML5 wurde 2008 veröffentlicht. Unter anderem durch durch die Entscheidung Apples angeheizt, den Flashplayer nicht am iPhone laufen zu lassen, entwickelten sich zunehmend Alternativen zu Flash. Plötzlich war es denkbar, komplexe Animationen und Spiele in Zukunft auch ganz ohne Flash auf Webseiten einzubinden. Es kam was kommen musste und Adobe gab Ende 2011 bekannt, Flash Mobile komplett einzustellen – HTML5 und CSS3 waren am Vormarsch und selbst von Adobe nichtmehr stoppbar.\u003C/p>\n\u003Ch3>CSS 3 Animationen: transform, translate & animation\u003C/h3>\n\u003Ca href=\"/sites/default/files/styles/full_width/public/wp-migration/wordpress-media-image/2012/07/browservergleich1-1.png?itok=o8dej0C9\" target=\"_blank\" rel=\"noopener noreferrer\" data-rel=\"lightbox-gallery-MJsbhoRk\" data-rl_title data-rl_caption=\"Vergleich der Browser auf CSS-Attribute\" title class=\"js-image-link\">\u003Cdiv data-entity-type=\"media\" data-entity-uuid=\"3136b3e7-ef6c-4be1-84e8-16b46784f516\" 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/2012/07/browservergleich1-1.png.webp?itok=-z_WnrlC 1x, /sites/default/files/styles/image_width_medium_x2/public/wp-migration/wordpress-media-image/2012/07/browservergleich1-1.png.webp?itok=NeqCw6xo 2x\" media=\"all and (min-width: 1024px) and (max-width: 1439px)\" type=\"image/webp\" width=\"540\" height=\"881\">\n              \u003Csource srcset=\"/sites/default/files/styles/image_width_small/public/wp-migration/wordpress-media-image/2012/07/browservergleich1-1.png.webp?itok=rbwbiTIF 1x, /sites/default/files/styles/image_width_small_x2/public/wp-migration/wordpress-media-image/2012/07/browservergleich1-1.png.webp?itok=Id_6rkJ4 2x\" media=\"all and (min-width: 745px) and (max-width: 1023px)\" type=\"image/webp\" width=\"540\" height=\"881\">\n              \u003Csource srcset=\"/sites/default/files/styles/image_width_xsmall/public/wp-migration/wordpress-media-image/2012/07/browservergleich1-1.png.webp?itok=aZrk_TVd 1x, /sites/default/files/styles/image_width_xsmall_x2/public/wp-migration/wordpress-media-image/2012/07/browservergleich1-1.png.webp?itok=FTTHq6X9 2x\" media=\"all and (min-width: 480px) and (max-width: 744px)\" type=\"image/webp\" width=\"540\" height=\"881\">\n              \u003Csource srcset=\"/sites/default/files/styles/image_width_xxsmall/public/wp-migration/wordpress-media-image/2012/07/browservergleich1-1.png.webp?itok=QupgDN_h 1x, /sites/default/files/styles/image_width_xxsmall_x2/public/wp-migration/wordpress-media-image/2012/07/browservergleich1-1.png.webp?itok=CeUFXoEf 2x\" media=\"all and (max-width: 479px)\" type=\"image/webp\" width=\"480\" height=\"783\">\n              \u003Csource srcset=\"/sites/default/files/styles/image_width_large/public/wp-migration/wordpress-media-image/2012/07/browservergleich1-1.png.webp?itok=GZikE4xa 1x, /sites/default/files/styles/image_width_large_x2/public/wp-migration/wordpress-media-image/2012/07/browservergleich1-1.png.webp?itok=uJSTMsa9 2x\" type=\"image/webp\" width=\"540\" height=\"881\">\n                  \u003Cimg loading=\"lazy\" width=\"540\" height=\"881\" src=\"/sites/default/files/styles/image_width_large_x2/public/wp-migration/wordpress-media-image/2012/07/browservergleich1-1.png.jpg?itok=uJSTMsa9\" alt title=\"browservergleich\">\n\n  \u003C/picture>\n\n\u003C/div>\n          \u003C/div>\n\n\u003C/div>\n\u003C/div>\n\u003C/a>\u003Cp>Animationen werden in CSS3 durch drei Attribute möglich.\u003Cbr>\nDas transform-Attribut erlaubt es, Elemente zwei oder dreidimensional zu transformieren, also zu verschieben, skalieren, rotieren und zu verzerren. Mit so genannten Easing-Kurven, bekannt aus klassische Animationssoftware, kann die Animation noch weiter beeinflusst werden, in dem Start oder Ende der Animation langsamer (z.B. sich langsam in Bewegung setzen bzw. abbremsen) und schneller abgespielt werden können.\u003Cbr>\nDas transition-Attribut ändert das Aussehen eines Objekts schrittweise. Dies erlaubt z.B. feinere Hover-Effekte, wenn die Maus über einen Button fährt.\u003Cbr>\nDas animation-Attribut schließlich eröffnet den Entwicklern die größte Freiheit über die Animation. Dabei funktioniert das animation-Attribut ähnlich wie das transform-Attribut, zusätzlich können aber u.a. Zwischenzustände in der Animation definiert werden.\u003Cbr>\nWichtig ist dabei noch anzumerken, dass viele Browser die Attribute noch nicht vollständig unterstützen. Einen Überblick welcher Browser welches CSS Attribut unterstützt gibt es in folgender Grafik.\u003Cbr>\n\u003C/p>\n\u003Ch3>Browsermarktanteile & Unterstützung\u003C/h3>\n\u003Ca href=\"/sites/default/files/styles/full_width/public/wp-migration/wordpress-media-image/2012/07/marktanteile1-1.png?itok=w6RNAv9J\" target=\"_blank\" rel=\"noopener noreferrer\" data-rel=\"lightbox-gallery-MJsbhoRk\" data-rl_title data-rl_caption title class=\"js-image-link\">\u003Cdiv data-entity-type=\"media\" data-entity-uuid=\"314a4357-f861-483f-b20e-9b21407bc5c1\" 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/2012/07/browservergleich_klein1-1.png.webp?itok=z2tVzN1v 1x, /sites/default/files/styles/image_width_medium_x2/public/wp-migration/wordpress-media-image/2012/07/browservergleich_klein1-1.png.webp?itok=oYwxvUGE 2x\" media=\"all and (min-width: 1024px) and (max-width: 1439px)\" type=\"image/webp\" width=\"520\" height=\"770\">\n              \u003Csource srcset=\"/sites/default/files/styles/image_width_small/public/wp-migration/wordpress-media-image/2012/07/browservergleich_klein1-1.png.webp?itok=Ad_0KZEC 1x, /sites/default/files/styles/image_width_small_x2/public/wp-migration/wordpress-media-image/2012/07/browservergleich_klein1-1.png.webp?itok=giUkpHFz 2x\" media=\"all and (min-width: 745px) and (max-width: 1023px)\" type=\"image/webp\" width=\"520\" height=\"770\">\n              \u003Csource srcset=\"/sites/default/files/styles/image_width_xsmall/public/wp-migration/wordpress-media-image/2012/07/browservergleich_klein1-1.png.webp?itok=kCxL91yM 1x, /sites/default/files/styles/image_width_xsmall_x2/public/wp-migration/wordpress-media-image/2012/07/browservergleich_klein1-1.png.webp?itok=3MsSRMlM 2x\" media=\"all and (min-width: 480px) and (max-width: 744px)\" type=\"image/webp\" width=\"520\" height=\"770\">\n              \u003Csource srcset=\"/sites/default/files/styles/image_width_xxsmall/public/wp-migration/wordpress-media-image/2012/07/browservergleich_klein1-1.png.webp?itok=fjkkp_OA 1x, /sites/default/files/styles/image_width_xxsmall_x2/public/wp-migration/wordpress-media-image/2012/07/browservergleich_klein1-1.png.webp?itok=KElpg6Wd 2x\" media=\"all and (max-width: 479px)\" type=\"image/webp\" width=\"480\" height=\"711\">\n              \u003Csource srcset=\"/sites/default/files/styles/image_width_large/public/wp-migration/wordpress-media-image/2012/07/browservergleich_klein1-1.png.webp?itok=pQxrIr2R 1x, /sites/default/files/styles/image_width_large_x2/public/wp-migration/wordpress-media-image/2012/07/browservergleich_klein1-1.png.webp?itok=Qqo-w17R 2x\" type=\"image/webp\" width=\"520\" height=\"770\">\n                  \u003Cimg loading=\"lazy\" width=\"520\" height=\"770\" src=\"/sites/default/files/styles/image_width_large_x2/public/wp-migration/wordpress-media-image/2012/07/browservergleich_klein1-1.png.jpg?itok=Qqo-w17R\" alt title=\"browservergleich_klein\">\n\n  \u003C/picture>\n\n\u003C/div>\n          \u003C/div>\n\n\u003C/div>\n\u003C/div>\n\u003C/a>\u003Cp>Ein großes Problem bei der Verbreitung von HTML5 & CSS3 Animationen ist momentan noch die Unterstützung durch Browserhersteller. Eine Recherche der momentanen Marktanteile am Browsermarkt (nach Browserversion) verknüpft mit der Fähigkeit, das -transform-Attribut interpretieren zu können findet sich in nachfolgender Grafik.\u003Cbr>\n\u003Cbr>\nDabei zeigt sich das rund zwei Drittel (64%) der User im Internet mit einem Browser surfen, der zumindest das -transform-Attribut versteht. Ein Drittel (36%), vor allem Internetexplorer 6, 7 und 8 User, müssen auf CSS3 Animationen verzichten.\u003Cbr>\nSieht man sich im Vergleich dazu die Unterstützung des -animation-Attributs an zeigt sich, das nur knapp 40% der momentanen User Animationen, die mit diesem Attribut erstellt wurden, sehen können, 60% der momentan in Umlauf befindlichen Browser sehen diese Animationen nicht.\u003Cbr>\nEs zeigt sich also, dass es noch einige Zeit dauern wird, bis ein Großteil der Nutzer im Internet HTML5 & CSS3 Animationen ohne Fallbacks nutzen können.\u003C/p>\n\u003Ch3>Zukunft\u003C/h3>\n\u003Cp>Was schon vor einigen Jahren absehbar war ist heute Gewissheit: Das Ende von Flash ist nicht weit. Mittlerweile hat Flash in allen Bereichen, die es einst für sich vereinnahmt hatte, starke Konkurrenz. Als eine der letzten Standbeine für Flash galten lange Zeit Animationen und Spiele. Nachdem Mozilla mit dem HTML5 basierten \u003Ca href=\"http://browserquest.mozilla.org/\">BrowserQuest\u003C/a> bewiesen hat, das komplexe Spiele im Web auch ohne Nachteile mit CSS3 und HTML5 umgesetzt werden können, scheinen auch diese letzten Standbeine zu wackeln.\u003Cbr>\nIn naher Zukunft werden (nahezu alle) eingesetzten Browser die nötigen CSS und HTML Attribute ohne Probleme unterstützen, um auch aufwendige Animationen bei allen Benutzern darstellen zu können. Und damit ist klar: HTML5 und CSS3 Animationen gehört die Zukunft.\u003C/p>\n        \u003C/div>\n    \u003C/div>\n\u003C/div>\n\n\n",{"__typename":154,"id":155,"excludeFromScreenreader":13,"mediaImage":156,"name":161,"path":164,"status":20},"MediaImage","2077",{"__typename":157,"url":158,"width":159,"height":160,"alt":161,"title":161,"size":162,"mime":163},"Image","http://liechtenecker-cms.liechtenecker-cms.svc.cluster.local/sites/default/files/wp-migration/wordpress-media-image/2012/07/html5_und_css3_animationen-1.jpg",1920,1280,"Liechtenecker Büro",254845,"image/jpeg","/media/2077/edit","\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://liechtenecker.at/blog/html5-und-css3-animationen/\" />\n\u003Cmeta property=\"og:locale\" content=\"de_DE\" />\n\u003Cmeta property=\"og:type\" content=\"article\" />\n\u003Cmeta property=\"og:title\" content=\"HTML5 und CSS3 Animationen - Liechtenecker\" />\n\u003Cmeta property=\"og:description\" content=\"HTML5 und CSS3 Animationen im Web gehört die Zukunft. Dieser Artikel geht kurz auf die Geschichte ein, beschreibt dann den heutigen Stand und geht auf die Verbreitung von Browsern ein und gibt einen Überblick über Tools, die zur Erstellung von Animationen benutzt werden können. Geschichte Animierte Objekte auf Webseiten sind beinahe so alt wie das […]\" />\n\u003Cmeta property=\"og:url\" content=\"https://liechtenecker.at/blog/html5-und-css3-animationen/\" />\n\u003Cmeta property=\"og:site_name\" content=\"Liechtenecker\" />\n\u003Cmeta property=\"article:published_time\" content=\"2012-07-06T11:44:56+00:00\" />\n\u003Cmeta property=\"og:image\" content=\"https://liechtenecker.at/wp-content/uploads/2012/07/browservergleich1-1.png\" />\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=\"4 Minuten\">\n\u003Cscript type=\"application/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https://schema.org\",\"@graph\":[{\"@type\":\"WebSite\",\"@id\":\"https://liechtenecker.at/#website\",\"url\":\"https://liechtenecker.at/\",\"name\":\"Liechtenecker\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":\"https://liechtenecker.at/?s={search_term_string}\",\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"de-DE\"},{\"@type\":\"ImageObject\",\"@id\":\"https://liechtenecker.at/blog/html5-und-css3-animationen/#primaryimage\",\"inLanguage\":\"de-DE\",\"url\":\"https://liechtenecker.at/wp-content/uploads/2012/07/browservergleich1-1.png\",\"width\":540,\"height\":881,\"caption\":\"Vergleich der Browser auf CSS-Attribute\"},{\"@type\":\"WebPage\",\"@id\":\"https://liechtenecker.at/blog/html5-und-css3-animationen/#webpage\",\"url\":\"https://liechtenecker.at/blog/html5-und-css3-animationen/\",\"name\":\"HTML5 und CSS3 Animationen - Liechtenecker\",\"isPartOf\":{\"@id\":\"https://liechtenecker.at/#website\"},\"primaryImageOfPage\":{\"@id\":\"https://liechtenecker.at/blog/html5-und-css3-animationen/#primaryimage\"},\"datePublished\":\"2012-07-06T11:44:56+00:00\",\"dateModified\":\"2012-07-06T11:44:56+00:00\",\"author\":{\"@id\":\"https://liechtenecker.at/#/schema/person/663b2d5142421ab394bf325c1b48cecf\"},\"inLanguage\":\"de-DE\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https://liechtenecker.at/blog/html5-und-css3-animationen/\"]}]},{\"@type\":\"Person\",\"@id\":\"https://liechtenecker.at/#/schema/person/663b2d5142421ab394bf325c1b48cecf\",\"name\":\"Stephan\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https://liechtenecker.at/#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":167,"id":168,"myRole":169,"name":170,"nickname":171},"User","23","langgedienter Frontend-Veteran","s-fletzberger","Stephan",{"latestKnowhow":173},[174,189,202],{"__typename":79,"id":175,"title":176,"path":177,"wpTeaserText":178,"wpPromotedTeaserImage":13,"wpHeaderImage":179},"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":154,"id":180,"excludeFromScreenreader":13,"mediaImage":181,"name":187,"path":188,"status":20},"3364",{"__typename":157,"url":182,"width":183,"height":184,"alt":185,"title":13,"size":186,"mime":163},"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,"Headerbilder Blogartikel Behind the scene Accessibility Audit.jpg","/media/3364/edit",{"__typename":79,"id":190,"title":191,"path":192,"wpTeaserText":193,"wpPromotedTeaserImage":13,"wpHeaderImage":194},"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":154,"id":195,"excludeFromScreenreader":13,"mediaImage":196,"name":200,"path":201,"status":20},"3355",{"__typename":157,"url":197,"width":183,"height":184,"alt":198,"title":13,"size":199,"mime":163},"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":203,"title":204,"path":205,"wpTeaserText":13,"wpPromotedTeaserImage":13,"wpHeaderImage":206},"1606","UI Trends 2026","/blog/ui-trends-2026",{"__typename":154,"id":207,"excludeFromScreenreader":21,"mediaImage":208,"name":212,"path":213,"status":20},"3303",{"__typename":157,"url":209,"width":183,"height":184,"alt":210,"title":13,"size":211,"mime":163},"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":215,"MenuItem:e2873307-b50a-4aab-b6b2-1950fd99c72e":216,"MenuItem:2cd9b7c9-142a-4ea3-b898-a0952c54a195":220,"MenuItem:a5effba3-5a8c-4125-8d78-0cdba09824db":223,"MenuItem:114bf071-bdbb-44cf-85c1-69e9d9e0777d":226,"Menu:footer":229,"ROOT_QUERY":239,"MenuItem:9ffc5019-cbd8-4b2e-8eb7-9feae486d4a1":255,"MenuItem:1c7a5430-8a42-4b24-9544-252adabc2f4c":258,"MenuItem:9c4feedc-79e4-4fbf-b68c-065f33ebfe4c":261,"MenuItem:3b77a27b-272a-489f-843e-53e23ed07741":264,"MenuItem:ce0bb82b-e1ee-4036-be95-f693a62e9f4a":267,"MenuItem:04a19381-81a9-4694-8653-182d8855d2b5":270,"Menu:nuxt-main-menu":273,"TermCategories:8":287,"TermTags:82":298,"TermTags:297":299,"TermTags:604":300,"MediaImage:2077":301,"User:23":303,"NodeWpPost:1103":304,"MediaImage:3364":329,"NodeWpPost:1619":331,"MediaImage:3355":334,"NodeWpPost:1616":336,"MediaImage:3303":339,"NodeWpPost:1606":341},["null","__typename",16,"id",17,"name",18,"direction",19],["null","__typename",10,"id",11,"title",12,"description",13,"url",14,"langcode",217,"internal",20,"expanded",21,"attributes",219],{"__ref":218},"Language:de",["null","__typename",23,"class",13],["null","__typename",10,"id",25,"title",26,"description",13,"url",27,"langcode",221,"internal",20,"expanded",21,"attributes",222],{"__ref":218},["null","__typename",23,"class",13],["null","__typename",10,"id",30,"title",31,"description",13,"url",32,"langcode",224,"internal",20,"expanded",21,"attributes",225],{"__ref":218},["null","__typename",23,"class",13],["null","__typename",10,"id",35,"title",36,"description",13,"url",37,"langcode",227,"internal",21,"expanded",21,"attributes",228],{"__ref":218},["null","__typename",23,"class",13],["null","__typename",5,"id",6,"name",7,"items",230],[231,233,235,237],{"__ref":232},"MenuItem:e2873307-b50a-4aab-b6b2-1950fd99c72e",{"__ref":234},"MenuItem:2cd9b7c9-142a-4ea3-b898-a0952c54a195",{"__ref":236},"MenuItem:a5effba3-5a8c-4125-8d78-0cdba09824db",{"__ref":238},"MenuItem:114bf071-bdbb-44cf-85c1-69e9d9e0777d",["null","__typename",240,"menu({\"name\":\"FOOTER\"})",241,"menu({\"name\":\"NUXT_MAIN_MENU\"})",243,"route({\"path\":\"/blog/html5-und-css3-animationen\"})",245,"latestKnowhow({\"excludeId\":\"1103\",\"limit\":3})",248],"Query",{"__ref":242},"Menu:footer",{"__ref":244},"Menu:nuxt-main-menu",["null","__typename",77,"entity",246],{"__ref":247},"NodeWpPost:1103",[249,251,253],{"__ref":250},"NodeWpPost:1619",{"__ref":252},"NodeWpPost:1616",{"__ref":254},"NodeWpPost:1606",["null","__typename",10,"id",45,"title",46,"description",13,"url",47,"langcode",256,"internal",20,"expanded",21,"attributes",257],{"__ref":218},["null","__typename",23,"class",13],["null","__typename",10,"id",51,"title",52,"description",13,"url",53,"langcode",259,"internal",20,"expanded",21,"attributes",260],{"__ref":218},["null","__typename",23,"class",13],["null","__typename",10,"id",56,"title",57,"description",13,"url",58,"langcode",262,"internal",20,"expanded",21,"attributes",263],{"__ref":218},["null","__typename",23,"class",13],["null","__typename",10,"id",61,"title",62,"description",13,"url",63,"langcode",265,"internal",20,"expanded",21,"attributes",266],{"__ref":218},["null","__typename",23,"class",13],["null","__typename",10,"id",66,"title",67,"description",13,"url",68,"langcode",268,"internal",20,"expanded",21,"attributes",269],{"__ref":218},["null","__typename",23,"class",13],["null","__typename",10,"id",71,"title",72,"description",13,"url",73,"langcode",271,"internal",20,"expanded",21,"attributes",272],{"__ref":218},["null","__typename",23,"class",13],["null","__typename",5,"id",41,"name",42,"items",274],[275,277,279,281,283,285],{"__ref":276},"MenuItem:9ffc5019-cbd8-4b2e-8eb7-9feae486d4a1",{"__ref":278},"MenuItem:1c7a5430-8a42-4b24-9544-252adabc2f4c",{"__ref":280},"MenuItem:9c4feedc-79e4-4fbf-b68c-065f33ebfe4c",{"__ref":282},"MenuItem:3b77a27b-272a-489f-843e-53e23ed07741",{"__ref":284},"MenuItem:ce0bb82b-e1ee-4036-be95-f693a62e9f4a",{"__ref":286},"MenuItem:04a19381-81a9-4694-8653-182d8855d2b5",["null","__typename",112,"id",113,"name",114,"path",115,"status",20,"weight",116,"description",288,"langcode",289,"changed",290,"metatag",291],["null","__typename",118,"processed",119,"format",120],{"__ref":218},["null","__typename",83,"timestamp",123,"timezone",85,"offset",86,"time",124],[292,294,296],["null","__typename",93,"tag",94,"attributes",293],["null","__typename",96,"name",97,"content",128],["null","__typename",93,"tag",94,"attributes",295],["null","__typename",96,"name",131,"content",132],["null","__typename",100,"tag",101,"attributes",297],["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",154,"id",155,"excludeFromScreenreader",13,"mediaImage",302,"name",161,"path",164,"status",20],["null","__typename",157,"url",158,"width",159,"height",160,"alt",161,"title",161,"size",162,"mime",163],["null","__typename",167,"id",168,"myRole",169,"name",170,"nickname",171],["null","__typename",79,"id",80,"title",81,"changed",305,"created",306,"langcode",307,"path",90,"promote",21,"status",20,"sticky",21,"metatag",308,"category",315,"contentElements",13,"evergreen",13,"tags",317,"wpBody",324,"wpHeaderImage",13,"wpHeaderImageOld",325,"wpHeaderImageOldSmall",13,"wpOgImage",13,"wpPromotedTeaserImage",13,"wpShareDescription",13,"wpShareTitle",13,"wpTeaserText",13,"wpYoastHead",165,"author",327],["null","__typename",83,"timestamp",84,"timezone",85,"offset",86,"time",87],["null","__typename",83,"timestamp",84,"timezone",85,"offset",86,"time",87],{"__ref":218},[309,311,313],["null","__typename",93,"tag",94,"attributes",310],["null","__typename",96,"name",97,"content",98],["null","__typename",100,"tag",101,"attributes",312],["null","__typename",103,"href",104,"hreflang",13,"rel",105,"media",13,"sizes",13,"type",13],["null","__typename",107,"tag",94,"attributes",314],["null","__typename",109,"property",110,"content",81],{"__ref":316},"TermCategories:8",[318,320,322],{"__ref":319},"TermTags:82",{"__ref":321},"TermTags:297",{"__ref":323},"TermTags:604",["null","__typename",151,"processed",152,"format",120,"summary",13],{"__ref":326},"MediaImage:2077",{"__ref":328},"User:23",["null","__typename",154,"id",180,"excludeFromScreenreader",13,"mediaImage",330,"name",187,"path",188,"status",20],["null","__typename",157,"url",182,"width",183,"height",184,"alt",185,"title",13,"size",186,"mime",163],["null","__typename",79,"id",175,"title",176,"path",177,"wpTeaserText",178,"wpPromotedTeaserImage",13,"wpHeaderImage",332],{"__ref":333},"MediaImage:3364",["null","__typename",154,"id",195,"excludeFromScreenreader",13,"mediaImage",335,"name",200,"path",201,"status",20],["null","__typename",157,"url",197,"width",183,"height",184,"alt",198,"title",13,"size",199,"mime",163],["null","__typename",79,"id",190,"title",191,"path",192,"wpTeaserText",193,"wpPromotedTeaserImage",13,"wpHeaderImage",337],{"__ref":338},"MediaImage:3355",["null","__typename",154,"id",207,"excludeFromScreenreader",21,"mediaImage",340,"name",212,"path",213,"status",20],["null","__typename",157,"url",209,"width",183,"height",184,"alt",210,"title",13,"size",211,"mime",163],["null","__typename",79,"id",203,"title",204,"path",205,"wpTeaserText",13,"wpPromotedTeaserImage",13,"wpHeaderImage",342],{"__ref":343},"MediaImage:3303"]