From 4b1a9203c547c019fc5398082ae19a3f3d4c3efe Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:41:15 -0500 Subject: initial commit --- files/de/web/css/animation/index.html | 125 ++++++++++++++++++++++++++++++++++ 1 file changed, 125 insertions(+) create mode 100644 files/de/web/css/animation/index.html (limited to 'files/de/web/css/animation/index.html') diff --git a/files/de/web/css/animation/index.html b/files/de/web/css/animation/index.html new file mode 100644 index 0000000000..77ff733e13 --- /dev/null +++ b/files/de/web/css/animation/index.html @@ -0,0 +1,125 @@ +--- +title: animation +slug: Web/CSS/animation +tags: + - CSS + - CSS Animationen + - CSS Eigenschaft + - Experimentell + - Referenz +translation_of: Web/CSS/animation +--- +
{{CSSRef}}
+ +

Übersicht

+ +

Die CSS Eigenschaft animation fasst die folgenden Werte zusammen: {{cssxref("animation-name")}}, {{cssxref("animation-duration")}}, {{cssxref("animation-timing-function")}}, {{cssxref("animation-delay")}}, {{cssxref("animation-iteration-count")}} und {{cssxref("animation-direction")}}.

+ +

Eine Beschreibung der animierbaren CSS Eigenschaften ist verfügbar; es sollte auch angemerkt werden, dass diese Beschreibung auch für CSS Übergänge gilt.

+ +

{{cssinfo}}

+ +

Syntax

+ +
/* @keyframes Dauer | Timingfunktion | Verzögerung |
+   Anzahl der Iterationen | Richtung | Füllmodus | Abspielstatus | Name */
+  animation: 3s ease-in 1s 2 reverse both paused slidein;
+
+/* @keyframes Dauer | Timingfunktion | Verzögerung | Name */
+  animation: 3s linear 1s slidein;
+
+/* @keyframes Dauer | Name */
+  animation: 3s slidein;
+
+ +

Die Reihenfolge innerhalb jeder Animationsdefinition ist wichtig: Der erste Wert in der Einheit {{cssxref("<time>")}} wird als {{cssxref("animation-duration")}} interpretiert, der zweite als {{cssxref("animation-delay")}}.

+ +

Beachte, dass die Reihenfolge auch innerhalb jeder Animationsdefinition wichtig ist, um {{cssxref("animation-name")}} Werte von anderen Schlüsselwörtern zu unterscheiden. Beim Parsen müssen Werte von Schlüsselwörtern, die für Eigenschaften außer {{cssxref("animation-name")}} gültig sind und nicht zuvor in der Kurzschreibweiseeigenschaft gefunden wurden, für diese Eigenschaften anstatt für {{cssxref("animation-name")}} verwendet werden. Zudem müssen bei der Serialisierung die Standardwerte anderer Eigenschaften zumindest in den Fällen ausgegeben werden, in denen es nötig ist, einen {{cssxref("animation-name")}}, der ein gültiger Wert einer anderen Eigenschaft sein könnte, zu unterscheiden, und können in zusätzlichen Fällen ausgegeben werden.

+ +

Formale Syntax

+ +
{{csssyntax}}
+
+ +

Beispiele

+ +

Siehe CSS Animationen.

+ +

Zylonenauge

+ +

Unter Berücksichtigung aller browserspezifischen Präfixe ist hier eine Zylonenauge-Animation, die lineare Farbverläufe und Animationen verwendet, die in allen Browsern funktioniert:

+ +
<div class="view_port">
+  <div class="polling_message">
+    Warte auf Nachrichten
+  </div>
+  <div class="cylon_eye"></div>
+</div>
+
+ +
.polling_message {
+  color: white;
+  float: left;
+  margin-right: 2%;
+}
+
+.view_port {
+  background-color: black;
+  height: 25px;
+  width: 100%;
+  overflow: hidden;
+}
+
+.cylon_eye {
+  background-color: red;
+  background-image: -webkit-linear-gradient(    left, rgba( 0,0,0,0.9 ) 25%, rgba( 0,0,0,0.1 ) 50%, rgba( 0,0,0,0.9 ) 75%);
+  background-image:    -moz-linear-gradient(    left, rgba( 0,0,0,0.9 ) 25%, rgba( 0,0,0,0.1 ) 50%, rgba( 0,0,0,0.9 ) 75%);
+  background-image:      -o-linear-gradient(    left, rgba( 0,0,0,0.9 ) 25%, rgba( 0,0,0,0.1 ) 50%, rgba( 0,0,0,0.9 ) 75%);
+  background-image:         linear-gradient(to right, rgba( 0,0,0,0.9 ) 25%, rgba( 0,0,0,0.1 ) 50%, rgba( 0,0,0,0.9 ) 75%);
+  color: white;
+  height: 100%;
+  width: 20%;
+
+  -webkit-animation: move_eye 4s linear 0s infinite alternate;
+     -moz-animation: move_eye 4s linear 0s infinite alternate;
+       -o-animation: move_eye 4s linear 0s infinite alternate;
+          animation: move_eye 4s linear 0s infinite alternate;
+}
+
+@-webkit-keyframes move_eye { from { margin-left:-20%; } to { margin-left:100%; }  }
+   @-moz-keyframes move_eye { from { margin-left:-20%; } to { margin-left:100%; }  }
+     @-o-keyframes move_eye { from { margin-left:-20%; } to { margin-left:100%; }  }
+        @keyframes move_eye { from { margin-left:-20%; } to { margin-left:100%; }  }
+
+ +

{{EmbedLiveSample('Zylonenauge')}}

+ +

Spezifikationen

+ + + + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName('CSS3 Animations', '#animation', 'animation')}}{{Spec2('CSS3 Animations')}}Ursprüngliche Definition
+ +

Browser Kompatibilität

+ +{{Compat("css.properties.animation")}} + +

Siehe auch

+ + -- cgit v1.2.3-54-g00ecf