Mit Transform und Transition wurden in den letzten beiden Webdesign-Workshops schon sehr spannende CSS Eigenschaften vorgestellt. In diesem Artikel geht es nun um CSS Animationen\u2026<\/p>\n\n\n\n\n\n\n\n
Let\u2018s do the Animation:<\/strong><\/p>\n\n\n\n Animationen mit CSS3 sind auch m\u00f6glich. F\u00fcr die folgenden Experimente erstellen wir wieder auf einer neuen Webseite einen Artikel mit einer kleinen Box\u2026<\/p>\n\n\n\n In der CSS-Datei steht nun folgendes\u2026:<\/p>\n\n\n\n Eingef\u00fcgt habe ich diese CSS Anweisungen in die artikel.css-Datei. Das Ergebnis ist jetzt, das sich auch der ganze Artikel in der H\u00f6he permanent \u00e4ndert und sich der Animation anpasst.<\/p>\n\n\n\n Die div-Box kann aber sicher auch anders positioniert werden und w\u00fcrde dann auch funktionieren.<\/p>\n\n\n\n Dieser Artikel sollte die CSS Eigenschaft Animation nur vorstellen\u2026Wie man die nun vern\u00fcnftig in eine Webseite einbaut steht auf einem anderen Blatt. Wer Ideen und Vorschl\u00e4ge hat, kann diese gerne als Kommentar hinterlassen\u2026<\/p>\n","protected":false},"excerpt":{"rendered":" Mit Transform und Transition wurden in den letzten beiden Webdesign-Workshops schon sehr spannende CSS Eigenschaften vorgestellt. In diesem Artikel geht es nun um CSS Animationen\u2026<\/p>\n","protected":false},"author":1,"featured_media":53,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5],"tags":[23],"class_list":["post-264","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-webdesign","tag-webdesign-gruppe-peine"],"_links":{"self":[{"href":"https:\/\/www.fuhselab.de\/index.php\/wp-json\/wp\/v2\/posts\/264","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.fuhselab.de\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.fuhselab.de\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.fuhselab.de\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.fuhselab.de\/index.php\/wp-json\/wp\/v2\/comments?post=264"}],"version-history":[{"count":3,"href":"https:\/\/www.fuhselab.de\/index.php\/wp-json\/wp\/v2\/posts\/264\/revisions"}],"predecessor-version":[{"id":354,"href":"https:\/\/www.fuhselab.de\/index.php\/wp-json\/wp\/v2\/posts\/264\/revisions\/354"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.fuhselab.de\/index.php\/wp-json\/wp\/v2\/media\/53"}],"wp:attachment":[{"href":"https:\/\/www.fuhselab.de\/index.php\/wp-json\/wp\/v2\/media?parent=264"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.fuhselab.de\/index.php\/wp-json\/wp\/v2\/categories?post=264"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.fuhselab.de\/index.php\/wp-json\/wp\/v2\/tags?post=264"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}<p>\n<div id=\u201cbox1\u2033>\n<\/div>\n<\/p><\/code><\/pre>\n\n\n\n@-webkit-keyframes boxAnimation{\n0%{\nmargin:0 0 0 0px;\n-webkit-transform:rotate(0deg);\nbackground-color:#999;\n}\n\n25%{\nmargin:0 0 0 800px;\n-webkit-transform:rotate(360deg);\n}\n\n50%{\nmargin:500px 0 0 800px;\n-webkit-transform:rotate(0deg);\nborder-radius:180px;\nbackground-color:#f00;\n}\n\n75%{\nmargin:500px 0 0 0px;\n-webkit-transform:rotate(360deg);\nbackground-color:#0f0;\n}\n\n100%{\nmargin:0 0 0 0;\n-webkit-transform:rotate(0deg);\nborder-radius:0px;\nbackground-color:#999;\n}\n}\n\n#box1{\nwidth:120px;height:120px;background:#999;\n-webkit-animation-name:boxAnimation;\n-webkit-animation-duration:10s;\n-webkit-animation-timing-function:ease-out;\n-webkit-animation-iteration-count:infinite;\n}<\/code><\/pre>\n\n\n\n