css-animations

CSS-Animationen ermöglichen das Animieren von Übergängen von einer CSS-Stil-Konfiguration zu einer anderen. Das CSS-Modul beschreibt eine Möglichkeit für Autoren, die Werte von CSS-Eigenschaften über die Zeit mit Keyframes zu animieren. Das Verhalten dieser Keyframe-Animationen kann durch Angabe ihrer Dauer, Anzahl der Wiederholungen und des Wiederholungsverhaltens gesteuert werden.
2
Antworten

Ist es sicher, eine Eigenschaft aus dem Schlüsselbild '0%' einer CSS-Animation zu entfernen, wenn sie bereits in der Klasse deklariert ist, auf die die Animation angewendet wird?

Kontext: Laut Animation Spec :    Wenn kein Keyframe "0%" oder "von" angegeben ist, dann der Benutzeragent   Konstruiert einen Keyframe mit 0% unter Verwendung der berechneten Werte der Eigenschaften   animiert werden. Wenn ein Keyframe...
01.11.2016, 19:03
1
Antwort

Überschreiben Sie die Animation mit: hover

Ich habe die folgende CSS-Animation: %Vor% Grundsätzlich möchte ich Folgendes tun: • Bei hover (also .border-strobe:hover ) möchte ich zum Beispiel die Rahmenfarbe in #FF1D38 ändern. • Sobald ich den Hover verschoben habe, möchte...
04.05.2012, 03:19
5
Antworten

Erstellen Sie segmentierte Control-like mit Animation

Ich habe eine ziemlich einfache, segmentierte Controller-ähnliche Radio-Button-Einrichtung. Wenn ein Optionsfeld ausgewählt wird, wird auf diese Schaltfläche eine Hintergrundfarbe angewendet. Wie kann ich die Hintergrundfarbe auf das ausgewäh...
23.11.2015, 22:29
3
Antworten

Wie kann die Verzögerung beim Starten von CSS Animationen / Übergängen in Android WebView verringert werden?

Ich versuche, CSS3-Animationen in Android WebView zu verwenden, aber ich bekomme eine sehr nervige Verzögerung beim Starten der Animation (ungefähr 500ms). Die Animation läuft flüssig, ohne Verzögerung, aber sie hat die Verzögerung beim Start...
27.03.2013, 12:11
1
Antwort

Wie führe ich eine CSS3-Keyframe-Animation einmal und nur dann aus, wenn sie ausgelöst wird?

Ich möchte eine HTML5-Animation implementieren, die etwas mehr beinhaltet, als nur ein Element von Punkt A nach Punkt B zu verschieben. Deshalb denke ich über die Verwendung von Keyframes anstelle von Übergängen nach. Ich möchte jedoch, dass die...
25.10.2013, 08:30
2
Antworten

Angekettete Transformationsanimation wird nicht animiert

Beim Arbeiten mit Animationen stieß ich auf ein undokumentiertes und unerwartetes Verhalten: Beim Verketten von Animationen mit transform (jede transform-Eigenschaft und nur die transform-Eigenschaft) wird die erste Animation das erwartete Ve...
06.04.2015, 10:20
1
Antwort

___ tag123css ___ CSS (Cascading Style Sheets) ist eine Darstellungsstilsprache, die das Aussehen und die Formatierung von HTML (Hyper Text Markup Language), XML-Dokumenten (Extensible Markup Language) und SVG-Elementen einschließlich (aber nicht beschränkt auf) Farben beschreibt. Layout, Schriftarten und Animationen. ___ tag123css3 ___ Die dritte Ausgabe der Cascading Style Sheets-Stilsprache (oft abgekürzt als CSS3) vereint leistungsstarke visuelle Fähigkeiten und vielseitige Designmanipulationstechniken. ___ tag123cssanimations ___ CSS-Animationen ermöglichen das Animieren von Übergängen von einer CSS-Stil-Konfiguration zu einer anderen. Das CSS-Modul beschreibt eine Möglichkeit für Autoren, die Werte von CSS-Eigenschaften über die Zeit mit Keyframes zu animieren. Das Verhalten dieser Keyframe-Animationen kann gesteuert werden, indem die Dauer, die Anzahl der Wiederholungen und das Wiederholungsverhalten festgelegt werden. ___ qstntxt ___

Vor ein paar Monaten habe ich ein animiertes CSS3 AT-AT Ссылка erstellt. Ich baute es hauptsächlich als Lernexperiment auf und um zu sehen, was mit den neuen CSS3-Funktionen möglich war. Wie die meisten Dinge, die wir bauen, habe ich es ins Netz gebracht. Ich habe nicht mit den großen Mengen an Traffic auf der Website gerechnet. Ich dachte, vielleicht ein paar Ansichten von Freunden und Arbeitskollegen, aber es gibt immer noch ein paar hundert Aufrufe pro Woche aus der ganzen Welt.

Als Ergebnis möchte ich es in Bezug auf die CPU-Auslastung etwas schlanker machen. Aus irgendeinem Grund drosseln die Animationen den Speicher. Ich würde mich freuen über jede Rückmeldung von euch netten Leuten auf stackoverflow, die es den Leuten erlauben würde, mein Experiment zu sehen, ohne dass ihre Fans mitmachen.

Auch bevor jemand eine JavaScript / Jquery-Alternative vorschlägt, erinnere ich mich daran, die Fähigkeiten von CSS3 zu testen.

Vielen Dank im Voraus.

    
___ answer10358787 ___

Gute Arbeit. Sie haben meine Augen für das Potenzial von CSS3 für Animationen geöffnet.

Ich kann die Frage, die Sie mir leider gestellt haben, nicht beantworten, aber ich trainiere, um ein Animator zu sein, damit ich einige Vorschläge machen kann, die Ihnen helfen, Ihre Animation zu verbessern:

  1. Heben Sie zwei Beine gleichzeitig an: Vorne links und hinten rechts gleichzeitig, dann vorne rechts und hinten links gleichzeitig. Sie müssen gegensätzliche Beine für das Gleichgewicht sein.

  2. Die Beine, die nicht angehoben werden, bleiben auf dem Boden stehen, bewegen sich jedoch rückwärts in der Szene, um die Tatsache zu simulieren, dass sich der Körper relativ zu seiner Position vorwärts bewegt.

  3. Da die Beine auf dem Boden nach hinten gleiten, wird der Körper natürlich etwas tiefer sinken.

  4. Wenn Sie noch mehr Realismus hinzufügen möchten, machen Sie den Körper sofort etwas weiter nach unten, sobald die angehobenen Beine wieder den Boden erreichen, dann kommen Sie wieder nach oben. Dadurch sieht es so aus, als würde sich das Gewicht auf diese Beine verlagern.

___

Vor ein paar Monaten habe ich ein animiertes CSS3 AT-AT Ссылка erstellt. Ich baute es hauptsächlich als Lernexperiment auf und um zu sehen, was mit den neuen CSS3-Funktionen möglich war. Wie die meisten Dinge, die wir bauen, habe ich es ins Ne...
27.04.2012, 09:11
1
Antwort

Kann ich mit JavaScript feststellen, wo wir in einer CSS-Keyframe-Animation prozentual sind

Ich habe nachgedacht. Ich weiß, dass ich erkennen kann, wann eine CSS-Animation gestartet, beendet oder wiederholt wird, indem ich auf die Animationstarts, Animationstiter, AnimationsEnd-Events lauscht (offensichtlich fehlen uns dort Browser-Prä...
20.07.2016, 11:33
2
Antworten

Seltsamer Hintergrundfehler beim Verwenden der Animation auf der Seite in Chrome

Wenn ein animiertes Element von einem anderen nicht animierten Element gefolgt wird, werden in Chrome ein Streifeneffekt und verschiedene Farbverschiebungen angezeigt. Schwer zu sehen, aber ich habe ein Video aufgenommen (wenn du die Seite heran...
30.10.2017, 22:37
2
Antworten

Animiert kontinuierlich Blasen mit CSS3 nach oben?

Siehe das folgende Bild: Ссылка Sehen Sie diese transparenten Kreise im Hintergrund? Ich möchte sie von unten nach oben animieren und dann manuell (außerhalb des Bildschirms) springen und die Animation neu starten. Die Kreise sind einfac...
19.12.2012, 13:03