{"id":9699,"date":"2023-08-15T23:27:08","date_gmt":"2023-08-15T21:27:08","guid":{"rendered":"https:\/\/tb-software.ch\/page\/?p=9699"},"modified":"2023-08-15T23:46:02","modified_gmt":"2023-08-15T21:46:02","slug":"webdesign-animiert","status":"publish","type":"post","link":"https:\/\/tb-software.ch\/page\/webdesign-animiert\/","title":{"rendered":"Webdesign &#8211; Animiert"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">Dank moderner Browsertechnik und CSS ist es m\u00f6glich ruckelfreie Animationen zu erstellen die f\u00fcr Webseiten genutzt werden k\u00f6nnen. So zum Beispiel SVG animierte Buchstaben.<\/p>\n\n\n\n\n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <style>\n        \/* Stil f\u00fcr die SVG-Pfade des ersten SVGs *\/\n        #first-svg path {\n            fill: none;\n            stroke: #000000;\n            stroke-linecap: round;\n            stroke-linejoin: round;\n            stroke-width: 4px;\n            stroke-dasharray: 1000;\n            stroke-dashoffset: 1000;\n            animation: drawPathFirst 55s forwards;\n        }\n\n        @keyframes drawPathFirst {\n            to {\n                stroke-dashoffset: 0;\n            }\n        }\n\n        \/* Stil f\u00fcr die SVG-Pfade des zweiten SVGs *\/\n        #second-svg path {\n            fill: none;\n            stroke: #000000;\n            stroke-linecap: round;\n            stroke-linejoin: round;\n            stroke-width: 4px;\n            stroke-dasharray: 1000;\n            stroke-dashoffset: 1000;\n            animation: drawPathSecond 55s forwards 20s;\n        }\n\n        @keyframes drawPathSecond {\n            to {\n                stroke-dashoffset: 0;\n            }\n        }\n    <\/style>\n<\/head>\n<body>\n    <svg id=\"first-svg\" width=\"800px\" height=\"800px\" viewBox=\"0 0 48 48\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n        <rect width=\"48\" height=\"48\" fill=\"white\" fill-opacity=\"0.01\"\/>\n        <path d=\"M8 10.9333L8 6H40V10.9333\" stroke=\"#000000\" stroke-width=\"4\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n        <path d=\"M24 6V42\" stroke=\"#000000\" stroke-width=\"4\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n        <path d=\"M16 42H32\" stroke=\"#000000\" stroke-width=\"4\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n    <\/svg>\n    \n    <?xml version=\"1.0\" encoding=\"utf-8\"?>\n   \n    <svg id=\"second-svg\" fill=\"none\" height=\"800px\" viewBox=\"0 0 15 15\" width=\"800px\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n        <path d=\"M5.10505 12C4.70805 12 4.4236 11.912 4.25171 11.736C4.0839 11.5559 4 11.2715 4 10.8827V4.11733C4 3.72033 4.08595 3.43588 4.25784 3.26398C4.43383 3.08799 4.71623 3 5.10505 3C6.42741 3 8.25591 3 9.02852 3C10.1373 3 11.0539 3.98153 11.0539 5.1846C11.0539 6.08501 10.6037 6.81855 9.70327 7.23602C10.8657 7.44851 11.5176 8.62787 11.5176 9.48128C11.5176 10.5125 10.9902 12 9.27734 12C8.77742 12 6.42626 12 5.10505 12ZM8.37891 8.00341H5.8V10.631H8.37891C8.9 10.631 9.6296 10.1211 9.6296 9.29877C9.6296 8.47643 8.9 8.00341 8.37891 8.00341ZM5.8 4.36903V6.69577H8.17969C8.53906 6.69577 9.27734 6.35939 9.27734 5.50002C9.27734 4.64064 8.48047 4.36903 8.17969 4.36903H5.8Z\" fill=\"#000000\" id=\"second-svg-path-0\"\/>\n    <\/svg>\n<\/body>\n\n\n","protected":false},"excerpt":{"rendered":"<p>Dank moderner Browsertechnik und CSS ist es m\u00f6glich ruckelfreie Animationen zu erstellen die f\u00fcr Webseiten genutzt werden k\u00f6nnen. So zum Beispiel SVG animierte Buchstaben.<\/p>\n","protected":false},"author":4,"featured_media":9701,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"pgc_meta":"","footnotes":""},"categories":[11],"tags":[],"class_list":["post-9699","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-applikationsentwicklung"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v21.8 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Webdesign - Animiert - TB-Software<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/tb-software.ch\/page\/webdesign-animiert\/\" \/>\n<meta property=\"og:locale\" content=\"de_DE\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Webdesign - Animiert - TB-Software\" \/>\n<meta property=\"og:description\" content=\"Dank moderner Browsertechnik und CSS ist es m\u00f6glich ruckelfreie Animationen zu erstellen die f\u00fcr Webseiten genutzt werden k\u00f6nnen. So zum Beispiel SVG animierte Buchstaben.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/tb-software.ch\/page\/webdesign-animiert\/\" \/>\n<meta property=\"og:site_name\" content=\"TB-Software\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/TBSoftware\" \/>\n<meta property=\"article:published_time\" content=\"2023-08-15T21:27:08+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-08-15T21:46:02+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/tb-software.ch\/page\/wp-content\/uploads\/2023\/08\/screenshot-2023_08_15-11-28-47.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"769\" \/>\n\t<meta property=\"og:image:height\" content=\"744\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"TB-Software\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Verfasst von\" \/>\n\t<meta name=\"twitter:data1\" content=\"TB-Software\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/tb-software.ch\/page\/webdesign-animiert\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/tb-software.ch\/page\/webdesign-animiert\/\"},\"author\":{\"name\":\"TB-Software\",\"@id\":\"https:\/\/tb-software.ch\/page\/#\/schema\/person\/6d69f8df8fc6caf6a9f1742c28261d02\"},\"headline\":\"Webdesign &#8211; Animiert\",\"datePublished\":\"2023-08-15T21:27:08+00:00\",\"dateModified\":\"2023-08-15T21:46:02+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/tb-software.ch\/page\/webdesign-animiert\/\"},\"wordCount\":30,\"publisher\":{\"@id\":\"https:\/\/tb-software.ch\/page\/#organization\"},\"articleSection\":[\"Applikationsentwicklung\"],\"inLanguage\":\"de\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/tb-software.ch\/page\/webdesign-animiert\/\",\"url\":\"https:\/\/tb-software.ch\/page\/webdesign-animiert\/\",\"name\":\"Webdesign - Animiert - TB-Software\",\"isPartOf\":{\"@id\":\"https:\/\/tb-software.ch\/page\/#website\"},\"datePublished\":\"2023-08-15T21:27:08+00:00\",\"dateModified\":\"2023-08-15T21:46:02+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/tb-software.ch\/page\/webdesign-animiert\/#breadcrumb\"},\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/tb-software.ch\/page\/webdesign-animiert\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/tb-software.ch\/page\/webdesign-animiert\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Startseite\",\"item\":\"https:\/\/tb-software.ch\/page\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Webdesign &#8211; Animiert\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/tb-software.ch\/page\/#website\",\"url\":\"https:\/\/tb-software.ch\/page\/\",\"name\":\"TB-Software\",\"description\":\"Ihr Partner f\u00fcr Applikationsentwicklung\",\"publisher\":{\"@id\":\"https:\/\/tb-software.ch\/page\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/tb-software.ch\/page\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"de\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/tb-software.ch\/page\/#organization\",\"name\":\"TB-Software\",\"alternateName\":\"Applikationen Entwickeln von Timo B\u00f6hme\",\"url\":\"https:\/\/tb-software.ch\/page\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\/\/tb-software.ch\/page\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/tb-software.ch\/page\/wp-content\/uploads\/2020\/05\/TB-Software-Logo2.png\",\"contentUrl\":\"https:\/\/tb-software.ch\/page\/wp-content\/uploads\/2020\/05\/TB-Software-Logo2.png\",\"width\":512,\"height\":512,\"caption\":\"TB-Software\"},\"image\":{\"@id\":\"https:\/\/tb-software.ch\/page\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/TBSoftware\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/tb-software.ch\/page\/#\/schema\/person\/6d69f8df8fc6caf6a9f1742c28261d02\",\"name\":\"TB-Software\",\"sameAs\":[\"http:\/\/www.tb-software.ch\"],\"url\":\"https:\/\/tb-software.ch\/page\/author\/tb-software\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Webdesign - Animiert - TB-Software","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/tb-software.ch\/page\/webdesign-animiert\/","og_locale":"de_DE","og_type":"article","og_title":"Webdesign - Animiert - TB-Software","og_description":"Dank moderner Browsertechnik und CSS ist es m\u00f6glich ruckelfreie Animationen zu erstellen die f\u00fcr Webseiten genutzt werden k\u00f6nnen. So zum Beispiel SVG animierte Buchstaben.","og_url":"https:\/\/tb-software.ch\/page\/webdesign-animiert\/","og_site_name":"TB-Software","article_publisher":"https:\/\/www.facebook.com\/TBSoftware","article_published_time":"2023-08-15T21:27:08+00:00","article_modified_time":"2023-08-15T21:46:02+00:00","og_image":[{"width":769,"height":744,"url":"https:\/\/tb-software.ch\/page\/wp-content\/uploads\/2023\/08\/screenshot-2023_08_15-11-28-47.jpg","type":"image\/jpeg"}],"author":"TB-Software","twitter_card":"summary_large_image","twitter_misc":{"Verfasst von":"TB-Software"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/tb-software.ch\/page\/webdesign-animiert\/#article","isPartOf":{"@id":"https:\/\/tb-software.ch\/page\/webdesign-animiert\/"},"author":{"name":"TB-Software","@id":"https:\/\/tb-software.ch\/page\/#\/schema\/person\/6d69f8df8fc6caf6a9f1742c28261d02"},"headline":"Webdesign &#8211; Animiert","datePublished":"2023-08-15T21:27:08+00:00","dateModified":"2023-08-15T21:46:02+00:00","mainEntityOfPage":{"@id":"https:\/\/tb-software.ch\/page\/webdesign-animiert\/"},"wordCount":30,"publisher":{"@id":"https:\/\/tb-software.ch\/page\/#organization"},"articleSection":["Applikationsentwicklung"],"inLanguage":"de"},{"@type":"WebPage","@id":"https:\/\/tb-software.ch\/page\/webdesign-animiert\/","url":"https:\/\/tb-software.ch\/page\/webdesign-animiert\/","name":"Webdesign - Animiert - TB-Software","isPartOf":{"@id":"https:\/\/tb-software.ch\/page\/#website"},"datePublished":"2023-08-15T21:27:08+00:00","dateModified":"2023-08-15T21:46:02+00:00","breadcrumb":{"@id":"https:\/\/tb-software.ch\/page\/webdesign-animiert\/#breadcrumb"},"inLanguage":"de","potentialAction":[{"@type":"ReadAction","target":["https:\/\/tb-software.ch\/page\/webdesign-animiert\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/tb-software.ch\/page\/webdesign-animiert\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Startseite","item":"https:\/\/tb-software.ch\/page\/"},{"@type":"ListItem","position":2,"name":"Webdesign &#8211; Animiert"}]},{"@type":"WebSite","@id":"https:\/\/tb-software.ch\/page\/#website","url":"https:\/\/tb-software.ch\/page\/","name":"TB-Software","description":"Ihr Partner f\u00fcr Applikationsentwicklung","publisher":{"@id":"https:\/\/tb-software.ch\/page\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/tb-software.ch\/page\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"de"},{"@type":"Organization","@id":"https:\/\/tb-software.ch\/page\/#organization","name":"TB-Software","alternateName":"Applikationen Entwickeln von Timo B\u00f6hme","url":"https:\/\/tb-software.ch\/page\/","logo":{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/tb-software.ch\/page\/#\/schema\/logo\/image\/","url":"https:\/\/tb-software.ch\/page\/wp-content\/uploads\/2020\/05\/TB-Software-Logo2.png","contentUrl":"https:\/\/tb-software.ch\/page\/wp-content\/uploads\/2020\/05\/TB-Software-Logo2.png","width":512,"height":512,"caption":"TB-Software"},"image":{"@id":"https:\/\/tb-software.ch\/page\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/TBSoftware"]},{"@type":"Person","@id":"https:\/\/tb-software.ch\/page\/#\/schema\/person\/6d69f8df8fc6caf6a9f1742c28261d02","name":"TB-Software","sameAs":["http:\/\/www.tb-software.ch"],"url":"https:\/\/tb-software.ch\/page\/author\/tb-software\/"}]}},"_links":{"self":[{"href":"https:\/\/tb-software.ch\/page\/wp-json\/wp\/v2\/posts\/9699","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/tb-software.ch\/page\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/tb-software.ch\/page\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/tb-software.ch\/page\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/tb-software.ch\/page\/wp-json\/wp\/v2\/comments?post=9699"}],"version-history":[{"count":0,"href":"https:\/\/tb-software.ch\/page\/wp-json\/wp\/v2\/posts\/9699\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/tb-software.ch\/page\/wp-json\/wp\/v2\/media\/9701"}],"wp:attachment":[{"href":"https:\/\/tb-software.ch\/page\/wp-json\/wp\/v2\/media?parent=9699"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/tb-software.ch\/page\/wp-json\/wp\/v2\/categories?post=9699"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/tb-software.ch\/page\/wp-json\/wp\/v2\/tags?post=9699"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}