{"id":3170,"date":"2014-04-29T10:39:42","date_gmt":"2014-04-29T08:39:42","guid":{"rendered":"http:\/\/www.frische-zitronen.de\/?p=3170"},"modified":"2017-12-03T11:06:20","modified_gmt":"2017-12-03T09:06:20","slug":"css-basierte-animationen-mit-animate-css","status":"publish","type":"post","link":"https:\/\/www.jukemedia.de\/blog\/2014\/04\/css-basierte-animationen-mit-animate-css\/","title":{"rendered":"CSS basierte Animationen mit animate.css"},"content":{"rendered":"<p class=\"move\">Animationen auf Webseiten k\u00f6nnen dazu benutzt werden, die Aufmerksamkeit des Betrachters gezielt auf bestimmte Botschaften zu lenken. W\u00e4hrend man bisher haupts\u00e4chlich Javascript einsetzt, ist es, mit der fortschreitenden Entwicklung der Browser und deren F\u00e4higkeiten, nun auch m\u00f6glich, Animationen als reine CSS-L\u00f6sung umzusetzen. Und das geht wirklich einfach.<\/p>\n<p>\u00a0<strong>Zum technischen Grundverst\u00e4ndnis empfehle ich zun\u00e4chst die Lekt\u00fcre des folgenden Artikels:<\/strong><br \/>\n<a href=\"http:\/\/www.mediaevent.de\/css\/animation.html\">http:\/\/www.mediaevent.de\/css\/animation.html<\/a><\/p>\n<p><strong>Hast du das verstanden, kannst du gleich zum n\u00e4chsten Schritt gehen und dir folgende Datei herunterladen:<\/strong><br \/>\n<a title=\"css-animate\" href=\"http:\/\/daneden.github.io\/animate.css\/\">http:\/\/daneden.github.io\/animate.css\/<\/a><\/p>\n<p><strong>animate.css<\/strong> ist eine css-Bibliothek, in der zahlreiche Effekte, vordefiniert sind. Du musst die @keyframes-Regeln nicht mehr selber notieren, sondern nur noch deine gew\u00fcnschte Animation zum Element, was sich bewegen soll, hinzuf\u00fcgen.<\/p>\n<p><strong>Eine ausf\u00fchrliche Anleitung findest du hier:<\/strong><br \/>\n<a title=\"Animationen mit CSS statt Javascript\" href=\"http:\/\/t3n.de\/news\/css-statt-javascript-animatecss-482593\/\">http:\/\/t3n.de\/news\/css-statt-javascript-animatecss-482593\/<\/a><\/p>\n<p>Aus eigener Erfahrung m\u00f6chte ich dazu noch erg\u00e4nzen, dass Elemente, die bewegt werden sollen, in meinen Contao-Installationen immer auf position: relative; gesetzt werden m\u00fcssen. Ansonsten scheint es nicht zu funktionieren.<\/p>\n<p><strong>30.04.2014 &#8211; Und hier noch ein Nachtrag.<\/strong><br \/>\nanimat.css ist crossbrowsertauglich, im IE funktionieren die Animationen aber erst ab IE10. Leider kann man derzeit den IE noch nicht getrost vergessen. Deswegen hier noch ein Linktipp f\u00fcr eine praktikable Sonderl\u00f6sung.<br \/>\n<a title=\"Animationen Workaround f\u00fcr IE&lt;10\" href=\"http:\/\/sevenx.de\/blog\/tutorial-bootstrap-3-thumbnail-caption-animation-mit-animate-css\/\">http:\/\/sevenx.de\/blog\/tutorial-bootstrap-3-thumbnail-caption-animation-mit-animate-css\/<\/a><\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Animationen auf Webseiten k\u00f6nnen dazu benutzt werden, die Aufmerksamkeit des Betrachters gezielt auf bestimmte Botschaften zu lenken. W\u00e4hrend man bisher haupts\u00e4chlich Javascript einsetzt, ist es, mit der fortschreitenden Entwicklung der Browser und deren F\u00e4higkeiten, nun auch m\u00f6glich, Animationen als reine CSS-L\u00f6sung umzusetzen. Und das geht wirklich einfach.<br \/>\n\u00a0Zum technischen Grundverst\u00e4ndnis empfehle ich zun\u00e4chst die Lekt\u00fcre des  &#8230; <a title=\"CSS basierte Animationen mit animate.css\" class=\"read-more\" href=\"https:\/\/www.jukemedia.de\/blog\/2014\/04\/css-basierte-animationen-mit-animate-css\/\" aria-label=\"Mehr Informationen \u00fcber CSS basierte Animationen mit animate.css\">Weiterlesen<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4,11],"tags":[143,367,461],"yst_prominent_words":[],"class_list":["post-3170","post","type-post","status-publish","format-standard","hentry","category-webdesign","category-contao","tag-css-xhtml","tag-css-tricks","tag-animationen"],"_links":{"self":[{"href":"https:\/\/www.jukemedia.de\/blog\/wp-json\/wp\/v2\/posts\/3170","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.jukemedia.de\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.jukemedia.de\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.jukemedia.de\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.jukemedia.de\/blog\/wp-json\/wp\/v2\/comments?post=3170"}],"version-history":[{"count":1,"href":"https:\/\/www.jukemedia.de\/blog\/wp-json\/wp\/v2\/posts\/3170\/revisions"}],"predecessor-version":[{"id":4003,"href":"https:\/\/www.jukemedia.de\/blog\/wp-json\/wp\/v2\/posts\/3170\/revisions\/4003"}],"wp:attachment":[{"href":"https:\/\/www.jukemedia.de\/blog\/wp-json\/wp\/v2\/media?parent=3170"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.jukemedia.de\/blog\/wp-json\/wp\/v2\/categories?post=3170"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.jukemedia.de\/blog\/wp-json\/wp\/v2\/tags?post=3170"},{"taxonomy":"yst_prominent_words","embeddable":true,"href":"https:\/\/www.jukemedia.de\/blog\/wp-json\/wp\/v2\/yst_prominent_words?post=3170"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}