{"id":1036,"date":"2021-01-17T08:30:01","date_gmt":"2021-01-17T08:30:01","guid":{"rendered":"https:\/\/imnusshof.ch\/wp\/?page_id=1036"},"modified":"2021-02-27T07:18:20","modified_gmt":"2021-02-27T07:18:20","slug":"css-keyframes-animation","status":"publish","type":"page","link":"https:\/\/imnusshof.ch\/wp\/css-keyframes-animation\/","title":{"rendered":"CSS Keyframes Animationen"},"content":{"rendered":"<p>\u2192 <a href=\"https:\/\/imnusshof.ch\/wp\/\">Home<\/a> \u2192 <a href=\"https:\/\/imnusshof.ch\/wp\/content\/\">Content<\/a><\/p>\n<div style=\"width: 100%; height: 1px; border-top: 1px solid\"><\/div>\n<style>\n#eins {\n  position: relative;\n  top: 20px;\n  left: 20px;\n  z-index: -1000;\n  width: 240px;\n  height: 240px;\n  background-color: #F8F8FF;\n  animation-name: eins;\n  animation-duration: 10s;\n  animation-iteration-count: 1;\n  padding: 0;\n  margin: 0;\n}\n@keyframes eins {\n  from {background-color: #F8F8FF;}\n  to {background-color: pink; opacity: 1}\n}\n<\/style>\n<style>\n#zwei {\n  position: relative;\n  top: 0;\n  left: 0;\n  z-index: -2000;\n  width: 80px;\n  height: 80px;\n  padding: 0px;\n  margin: 0;\n  animation: zwei 5s 2; \/* Name; Dauer 1 Weg; Wiederholung *\/\n  animation-direction: alternate;\n}\n@keyframes zwei {\n  0%   {left: 0px; top: 0px;}\n  25%  {left: 160px; top: 0px;}\n  50%  {left: 160px; top: 160px;}\n  75%  {left: 0px; top: 160px;}\n  100% {left: 0px; top: 0px;}\n}\n<\/style>\n<div id=\"eins\">\n<div id=\"zwei\"><img decoding=\"async\" src=\"https:\/\/imnusshof.ch\/img\/Beat-effektiert-180px.jpg\" width=\"80px\" height=\"80px\" alt=\"Beat R&uuml;edi\"><\/img><\/div>\n<div id=\"drei\"><\/div>\n<\/div>\n<p><br clear=\"all\"><br \/>\n&rarr; <a href=\"javascript:location.reload()\">Play again<\/a><br \/>\nCSS erlaubt animierte HTML Elemente ohne JavaScript und ohne Flash. Und: auch der MS Edge kann keyframes! &rarr; <a href=\"https:\/\/www.w3schools.com\/css\/css3_animations.asp\" rel=\"noopener\" target=\"_blank\">Weitere Informationen<\/a>. Beachte: es sind 2 Animationen \u00fcbereinander gelagert. Das erneute Abspielen wird erm\u00f6glicht durch den einfachen JavaScript: <em>location.reload<\/em>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u2192 Home \u2192 Content &rarr; Play again CSS erlaubt animierte HTML Elemente ohne JavaScript und ohne Flash. Und: auch der MS Edge kann keyframes! &rarr; Weitere Informationen. Beachte: es sind [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"ngg_post_thumbnail":0,"episode_type":"","audio_file":"","podmotor_file_id":"","podmotor_episode_id":"","cover_image":"","cover_image_id":"","duration":"","filesize":"","filesize_raw":"","date_recorded":"","explicit":"","block":"","itunes_episode_number":"","itunes_title":"","itunes_season_number":"","itunes_episode_type":"","footnotes":""},"class_list":["post-1036","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/imnusshof.ch\/wp\/wp-json\/wp\/v2\/pages\/1036","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/imnusshof.ch\/wp\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/imnusshof.ch\/wp\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/imnusshof.ch\/wp\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/imnusshof.ch\/wp\/wp-json\/wp\/v2\/comments?post=1036"}],"version-history":[{"count":69,"href":"https:\/\/imnusshof.ch\/wp\/wp-json\/wp\/v2\/pages\/1036\/revisions"}],"predecessor-version":[{"id":1382,"href":"https:\/\/imnusshof.ch\/wp\/wp-json\/wp\/v2\/pages\/1036\/revisions\/1382"}],"wp:attachment":[{"href":"https:\/\/imnusshof.ch\/wp\/wp-json\/wp\/v2\/media?parent=1036"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}