-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathanimation.html
28 lines (28 loc) · 15.9 KB
/
animation.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!DOCTYPE html><html lang="de"><head><title>Animation | Designsystem der Stadtwerke Münster</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="title" content="AnimationDesignsystem"><meta name="description" content=""><meta name="keywords" content=""><meta name="viewport" content="width=device-width, initial-scale=1"><meta name="robots" content="index,follow"><meta name="author" content="Autor"><meta name="publisher" content="Publizist"><meta property="og:site_name" content="Designsystem der Stadtwerke Münster"><meta property="og:url" content="https://swmue.brandsites.deanimation.html"><meta property="og:title" content="Animation"><meta property="og:description" content=""><meta property="og:image" content="https://swmue.brandsites.deassets/picts/default.png"><meta property="og:locale" content="de_DE"><meta property="og:language" content="de"><link rel="apple-touch-icon" sizes="180x180" href="assets/fav/apple-touch-icon.png?v=1637680488962"><link rel="icon" type="image/png" sizes="32x32" href="assets/fav/favicon-32x32.png?v=1637680488962"><link rel="icon" type="image/png" sizes="16x16" href="assets/fav/favicon-16x16.png?v=1637680488962"><link rel="manifest" href="assets/fav/site.webmanifest?v=1637680488962"><link rel="shortcut icon" href="assets/fav/favicon.ico?v=1637680488962"><meta name="msapplication-TileColor" content="#da532c"><meta name="msapplication-TileImage" content="assets/fav/mstile-144x144.png?v=1637680488962"><meta name="msapplication-config" content="assets/fav/browserconfig.xml?v=1637680488962"><meta name="theme-color" content="#ffffff"><link rel="stylesheet" href="assets/css/app.bundle.css"><link rel="stylesheet" href="assets/css/ide-editmode.css"><script id="Cookiebot" src="https://consent.cookiebot.com/uc.js" data-cbid="a2857e8c-8bbc-45fa-baf6-0d0986cb44f6" type="text/javascript" async></script><script>
let bots = new RegExp('/bot|slurp|crawler|spider|crawling/i');
if (!bots.test(navigator.userAgent)) {
let css = '[data-animate]{opacity:0;}';
let style = document.createElement('style');
document.head.appendChild(style);
style.type = 'text/css';
style.appendChild(document.createTextNode(css));
}
</script><script>if(/MSIE \d|Trident.*rv:/.test(navigator.userAgent)) document.write('<script>document.createElement("picture");<\/script><script src="/assets/js/picturefill.min.js" async><\/script>');</script></head><body><header></header><main><div id="intro" class="c-section"><div class="g-container"><div class="g-row"><div class="g-col-12"><div class="c-component-header"><div class="c-component-header__action-wrapper"><div class="c-component-header__cta-wrapper"> <a class="c-cta c-cta--small is-active" href="animation.html"><span class="c-cta__text">All Themes</span></a></div></div></div></div></div></div></div><div id="figma" class="c-section"><div class="g-container"><div class="g-row"><div class="g-col-12 g-col-tp-8"><div class="c-text c-markdown"><h1>Animation</h1><p>Wir sind davon überzeugt, dass Animationen den Unterschied zwischen einer guter und einem hervorragenden Benutzererlebnis schaffen. Animationen erwecken unsere Benutzeroberfläche zum Leben und geben unseren Nutzern gleichzeitig wertvolles Feedback.</p></div></div></div></div></div><div class="c-section p-2"><div class="g-container"><div class="g-row"><div class="g-col-12 g-col-tp-6"><div class="c-code-block"><div class="c-code-block__preview"><div data-animate><div class="c-text"><h2>Klimaschutz mit den Stadtwerken</h2><p>Als kommunaler Versorger gehen wir mit gutem Beispiel voran und haben bereits 2019 sämtliche unserer Emissionen aus Strom- und Wärmeverbrauch sowie Mobilität neutral gestellt. Und auch Sie können Ihren CO2-Ausstoß mit uns kompensieren. Als erstes Stadtwerk in Deutschland bieten wir mit unserer Initiative Münster:CO2neutral die Möglichkeit, Treibhausgasemissionen auszugleichen indem CO2-Zertifikate aus anerkannten Klimaschutzprojekten ausgewählt und stillgelegt werden. Unterstützen Sie anerkannte Klimaschutz-Projekte auf der ganzen Welt – und leisten Sie damit zusätzlich einen ganz konkreten Umwelt-Beitrag in unserer Region!</p></div></div></div><div class="c-code-block__source-wrapper"><div class="c-code-block__source"><pre><code class="hljs html">
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">data-animate</span>></span>
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"c-text"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">h2</span>></span>Klimaschutz mit den Stadtwerken<span class="hljs-tag"></<span class="hljs-name">h2</span>></span>
<span class="hljs-tag"><<span class="hljs-name">p</span>></span>Als kommunaler Versorger gehen wir mit gutem Beispiel voran und haben bereits 2019 sämtliche unserer Emissionen aus Strom- und Wärmeverbrauch sowie Mobilität neutral gestellt. Und auch Sie können Ihren CO2-Ausstoß mit uns kompensieren. Als erstes Stadtwerk in Deutschland bieten wir mit unserer Initiative Münster:CO2neutral die Möglichkeit, Treibhausgasemissionen auszugleichen indem CO2-Zertifikate aus anerkannten Klimaschutzprojekten ausgewählt und stillgelegt werden. Unterstützen Sie anerkannte Klimaschutz-Projekte auf der ganzen Welt – und leisten Sie damit zusätzlich einen ganz konkreten Umwelt-Beitrag in unserer Region!<span class="hljs-tag"></<span class="hljs-name">p</span>></span>
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
</code></pre></div> <button class="c-code-block__copy-code-button"> <span class="label">Copy</span> <span class="error">Failed to copy</span> <span class="success">Copied</span></button></div><div class="c-code-block__buttons"> <button type="button" class="c-code-block__button c-code-block__toggle">Source<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"></polyline></svg></button></div></div></div><div class="g-col-12 g-col-tp-6"><div class="c-code-block"><div class="c-code-block__preview"><div data-animate data-fx-time="1000"><div class="c-text"><h2>Klimaschutz mit den Stadtwerken</h2><p>Als kommunaler Versorger gehen wir mit gutem Beispiel voran und haben bereits 2019 sämtliche unserer Emissionen aus Strom- und Wärmeverbrauch sowie Mobilität neutral gestellt. Und auch Sie können Ihren CO2-Ausstoß mit uns kompensieren. Als erstes Stadtwerk in Deutschland bieten wir mit unserer Initiative Münster:CO2neutral die Möglichkeit, Treibhausgasemissionen auszugleichen indem CO2-Zertifikate aus anerkannten Klimaschutzprojekten ausgewählt und stillgelegt werden. Unterstützen Sie anerkannte Klimaschutz-Projekte auf der ganzen Welt – und leisten Sie damit zusätzlich einen ganz konkreten Umwelt-Beitrag in unserer Region!</p></div></div></div><div class="c-code-block__source-wrapper"><div class="c-code-block__source"><pre><code class="hljs html">
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">data-animate</span> <span class="hljs-attr">data-fx-time</span>=<span class="hljs-string">"1000"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"c-text"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">h2</span>></span>Klimaschutz mit den Stadtwerken<span class="hljs-tag"></<span class="hljs-name">h2</span>></span>
<span class="hljs-tag"><<span class="hljs-name">p</span>></span>Als kommunaler Versorger gehen wir mit gutem Beispiel voran und haben bereits 2019 sämtliche unserer Emissionen aus Strom- und Wärmeverbrauch sowie Mobilität neutral gestellt. Und auch Sie können Ihren CO2-Ausstoß mit uns kompensieren. Als erstes Stadtwerk in Deutschland bieten wir mit unserer Initiative Münster:CO2neutral die Möglichkeit, Treibhausgasemissionen auszugleichen indem CO2-Zertifikate aus anerkannten Klimaschutzprojekten ausgewählt und stillgelegt werden. Unterstützen Sie anerkannte Klimaschutz-Projekte auf der ganzen Welt – und leisten Sie damit zusätzlich einen ganz konkreten Umwelt-Beitrag in unserer Region!<span class="hljs-tag"></<span class="hljs-name">p</span>></span>
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
</code></pre></div> <button class="c-code-block__copy-code-button"> <span class="label">Copy</span> <span class="error">Failed to copy</span> <span class="success">Copied</span></button></div><div class="c-code-block__buttons"> <button type="button" class="c-code-block__button c-code-block__toggle">Source<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"></polyline></svg></button></div></div></div></div></div></div><aside class="sidebar"><nav class="c-side-nav"> <button class="c-side-nav__nav-toggle" id="c-side-nav__toggle"><span class="c-side-nav__toggle-icon"></span></button><div class="c-side-nav__picture-wrapper"><a class="c-side-nav__picture-link" href="/"><div class="c-picture"> <img alt="Logo" src="assets/img/logo.svg"> <span class="c-badge" style="
position: absolute;
left: 101px;
bottom: -10px;
">v1.0.0</span></div></a><div class="c-cta-group"> <a class="c-cta" href="https://github.com/wirDesign-communication-AG/stadtwerke-muenster-design-system" target="_blank"><span class="c-cta__text">GitHub</span></a> <a class="c-cta" href="https://www.figma.com/file/wLXdixPS3eSOEmOtvxj6Jg/SWMS-?node-id=0%3A1" target="_blank"><span class="c-cta__text">Figma</span></a></div><div class="c-cta-group c-filter"><span class="c-input-wrapper " data-action="wrapper"><div class="c-input__container"> <input autofocus class="c-input c-filter__input" type="search" name="input" id="input" aria-label="Componentenfilter. Bitte Text eintragen." placeholder="Filter Components..."></div></span></div></div><div class="c-side-nav__nav-wrapper"><ul><li><p>Introduction</p><ul><li> <a class="" href="index.html" title="Overview">Overview</a></li><li> <a class="" href="getting-started.html" title="Getting Started">Getting Started</a></li><li> <a class="" href="accessibility.html" title="Accessibility">Accessibility</a></li><li> <a class="" href="principles.html" title="Principles">Principles</a></li><li> <a class="" href="theming.html" title="Theming">Theming</a></li></ul></li><li><p>Basics</p><ul><li> <a class="is-active" href="animation.html" title="Animation">Animation</a></li><li> <a class="" href="colors.html" title="Colors">Colors</a><ul class="c-side-nav__sub-sidebar"><li> <a class="c-side-nav__section-link" href="/colors.html#intro" data-anchor="intro" title="Intro">Intro</a></li><li> <a class="c-side-nav__section-link" href="/colors.html#color-primary" data-anchor="color-primary" title="Primary">Primary</a></li><li> <a class="c-side-nav__section-link" href="/colors.html#color-secondary" data-anchor="color-secondary" title="Secondary">Secondary</a></li><li> <a class="c-side-nav__section-link" href="/colors.html#color-special" data-anchor="color-special" title="Special">Special</a></li><li> <a class="c-side-nav__section-link" href="/colors.html#color-backgrounds" data-anchor="color-backgrounds" title="Backgrounds">Backgrounds</a></li></ul></li><li> <a class="" href="graphics.html" title="Graphics">Graphics</a></li><li> <a class="" href="layout.html" title="Layout">Layout</a></li><li> <a class="" href="icons.html" title="Icons">Icons</a></li><li> <a class="" href="logo.html" title="Logo">Logo</a></li><li> <a class="" href="spacing.html" title="Spacing">Spacing</a></li><li> <a class="" href="typography.html" title="Typography">Typography</a><ul class="c-side-nav__sub-sidebar"><li> <a class="c-side-nav__section-link" href="/typography.html#typo-intro" data-anchor="typo-intro" title="Intro">Intro</a></li><li> <a class="c-side-nav__section-link" href="/typography.html#typo-headlines" data-anchor="typo-headlines" title="Headline">Headline</a></li><li> <a class="c-side-nav__section-link" href="/typography.html#typo-text" data-anchor="typo-text" title="Text">Text</a></li><li> <a class="c-side-nav__section-link" href="/typography.html#typo-quote" data-anchor="typo-quote" title="Quote">Quote</a></li></ul></li></ul></li><li><p>Form-Elements</p><ul><li> <a class="" href="checkbox.html" title="Checkbox">Checkbox</a></li><li> <a class="" href="date-picker.html" title="Date-Picker">Date-Picker</a></li><li> <a class="" href="dropdown.html" title="Dropdown">Dropdown</a></li><li> <a class="" href="file-upload.html" title="File-Upload">File-Upload</a></li><li> <a class="" href="form.html" title="Form">Form</a></li><li> <a class="" href="input.html" title="Input">Input</a></li><li> <a class="" href="radio-button.html" title="Radio-Button">Radio-Button</a></li><li> <a class="" href="switch.html" title="Switch">Switch</a></li><li> <a class="" href="toggle-button.html" title="Toggle-Button">Toggle-Button</a></li><li> <a class="" href="tooltip.html" title="Tooltip">Tooltip</a></li></ul></li><li><p>Basic Components</p><ul><li> <a class="" href="badge.html" title="Badge">Badge</a></li><li> <a class="" href="button.html" title="Button">Button</a><ul class="c-side-nav__sub-sidebar"><li> <a class="c-side-nav__section-link" href="/button.html#intro" data-anchor="intro" title="Intro">Intro</a></li><li> <a class="c-side-nav__section-link" href="/button.html#standard" data-anchor="standard" title="Variationen">Variationen</a></li><li> <a class="c-side-nav__section-link" href="/button.html#cta-group" data-anchor="cta-group" title="Gruppe">Gruppe</a></li></ul></li><li> <a class="" href="chips.html" title="Chips">Chips</a></li><li> <a class="" href="eye-catcher.html" title="Eye-Catcher">Eye-Catcher</a></li><li> <a class="" href="image.html" title="Image">Image</a></li><li> <a class="" href="loader.html" title="Loader">Loader</a></li><li> <a class="" href="lottie-animation.html" title="Lottie-Animation">Lottie-Animation</a></li><li> <a class="" href="messages.html" title="Messages">Messages</a></li><li> <a class="" href="quote.html" title="Quote">Quote</a></li><li> <a class="" href="text.html" title="Text">Text</a></li><li> <a class="" href="table.html" title="Table">Table</a></li><li> <a class="" href="video.html" title="Video">Video</a></li></ul></li><li><p>Modules</p><ul><li> <a class="" href="accordion.html" title="Accordion">Accordion</a></li><li> <a class="" href="breadcrumb.html" title="Breadcrumb">Breadcrumb</a></li><li> <a class="" href="card.html" title="Card">Card</a></li><li> <a class="" href="carousel.html" title="Carousel">Carousel</a></li><li> <a class="" href="hero.html" title="Hero">Hero</a></li><li> <a class="" href="hero-carousel.html" title="Hero-Carousel">Hero-Carousel</a></li><li> <a class="" href="navigation.html" title="Navigation">Navigation</a></li><li> <a class="" href="tabs.html" title="Tabs">Tabs</a></li><li> <a class="" href="text-picture.html" title="Text-Picture">Text-Picture</a></li></ul></li></ul></div></nav></aside></main><footer><div class="c-footer p-1"><div class="g-container"><div class="g-row"><div class="g-col-12"><div class="c-footer__nav-wrapper"><nav class="c-footer__nav"><ul class="c-footer__nav-list"><li class="c-footer__nav-list-item"> <a href="impressum.html" title="Impressum">Impressum</a></li><li class="c-footer__nav-list-item"> <a href="datenschutz.html" title="Datenschutz">Datenschutz</a></li></ul></nav></div></div></div></div></div></footer><script src='assets/js/app.js'></script><script src='assets/js/side-nav.js'></script><script src='assets/js/code-block.js'></script></body></html>