From 4b1a9203c547c019fc5398082ae19a3f3d4c3efe Mon Sep 17 00:00:00 2001
From: Peter Bengtsson <mail@peterbe.com>
Date: Tue, 8 Dec 2020 14:41:15 -0500
Subject: initial commit

---
 .../web/css/animation-timing-function/index.html   | 93 ++++++++++++++++++++++
 1 file changed, 93 insertions(+)
 create mode 100644 files/de/web/css/animation-timing-function/index.html

(limited to 'files/de/web/css/animation-timing-function')

diff --git a/files/de/web/css/animation-timing-function/index.html b/files/de/web/css/animation-timing-function/index.html
new file mode 100644
index 0000000000..8f73828d74
--- /dev/null
+++ b/files/de/web/css/animation-timing-function/index.html
@@ -0,0 +1,93 @@
+---
+title: animation-timing-function
+slug: Web/CSS/animation-timing-function
+tags:
+  - CSS
+  - CSS Animationen
+  - CSS Eigenschaft
+  - Layout
+  - Referenz
+translation_of: Web/CSS/animation-timing-function
+---
+<p>{{CSSRef}}</p>
+
+<h2 id="Übersicht">Übersicht</h2>
+
+<p>Die <code>animation-timing-function</code> <a href="/de/docs/Web/CSS">CSS</a> Eigenschaft gibt an, wie eine CSS Animation über die Dauer eines Zyklus verlaufen soll. Die möglichen Werte sind eine oder mehrere {{cssxref("&lt;timing-function&gt;")}}.</p>
+
+<p>Für Schlüsselbildanimationen wird die Timingfunktion zwischen den <a href="/de/docs/Web/CSS/@keyframes">Schlüsselbildern</a> angewandt, anstatt über die gesamte Animation. Mit anderen Worten, die Timingfunktion wird auf den Start des Schlüsselbildes und an dessen Ende angewandt.</p>
+
+<p>Eine Animationstimingfunktion, die innerhalb eines Schlüsselbildblocks definiert wurde, wird auf dieses Schlüsselbild angewandt. Falls keine Timingfunktion für das Schlüsselbild angegeben wurde, wird die Timingfunktion verwendet, die für die gesamte Animation definiert wurde.</p>
+
+<p>Es ist oftmals einfacher, die Kurzform Eigenschaft {{cssxref("animation")}} zu verwenden, um alle Animationseigenschaften auf einmal zu setzen.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="brush: css notranslate">/* Schlüsselwortwerte */
+animation-timing-function: ease;
+animation-timing-function: ease-in;
+animation-timing-function: ease-out;
+animation-timing-function: ease-in-out;
+animation-timing-function: linear;
+animation-timing-function: step-start;
+animation-timing-function: step-end;
+
+/* Funktionswerte */
+animation-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1);
+animation-timing-function: steps(4, end);
+
+/* Mehrere Animationen */
+animation-timing-function: ease, step-start, cubic-bezier(0.1, 0.7, 1.0, 0.1);
+
+/* Globale Werte */
+animation-timing-function: inherited;
+animation-timing-function: initial;
+animation-timing-function: unset;
+</pre>
+
+<h3 id="Werte">Werte</h3>
+
+<dl>
+ <dt><code>&lt;timingfunction&gt;</code></dt>
+ <dd>Jeder {{cssxref("&lt;timing-function&gt;")}} Wert repräsentiert die Timingfunktion, die mit der dazugehörigen zu animierenden Eigenschaft verknüpft wird, die in {{ cssxref("animation-property") }} definiert wird.</dd>
+</dl>
+
+<h3 id="Formale_Syntax">Formale Syntax</h3>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<p>Siehe <a href="/de/docs/Web/Guide/CSS/CSS_Animationen_nutzen" title="CSS/CSS_animations">CSS Animationen</a> für Beispiele</p>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Anmerkung</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Animations', '#animation-timing-function', 'animation-timing-function')}}</td>
+   <td>{{Spec2('CSS3 Animations')}}</td>
+   <td>Ursprüngliche Definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>
+
+<p>{{Compat("css.properties.animation-timing-function")}}</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li><a href="/de/docs/Web/Guide/CSS/CSS_Animationen_nutzen" title="Tutorial about CSS animations">CSS Animationen nutzen</a></li>
+ <li>{{ domxref("AnimationEvent") }}</li>
+</ul>
-- 
cgit v1.2.3-54-g00ecf