Als «css-animations» getaggte Fragen

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

4
Beibehaltung des Endzustands am Ende einer CSS3-Animation
Ich führe eine Animation für einige Elemente aus, die opacity: 0;im CSS festgelegt sind. Die Animationsklasse wird auf Click angewendet und ändert mithilfe von Keyframes die Deckkraft von 0unter 1(unter anderem). Wenn die Animation beendet ist, kehren die Elemente leider zurück zu opacity: 0(sowohl in Firefox als auch in Chrome). …
10
So erstellen Sie mit CSS 3 blinkenden / blinkenden Text
Derzeit habe ich diesen Code: @-webkit-keyframes blinker { from { opacity: 1.0; } to { opacity: 0.0; } } .waitingForConnection { -webkit-animation-name: blinker; -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: cubic-bezier(.5, 0, 1, 1); -webkit-animation-duration: 1.7s; } Es blinkt, aber es blinkt nur in "eine Richtung". Ich meine, es wird nur ausgeblendet, und dann …
11
CSS3-Übergangsanimation beim Laden?
Ist es möglich, CSS3-Übergangsanimationen beim Laden von Seiten ohne Javascript zu verwenden? Dies ist eine Art von dem, was ich will, aber beim Laden der Seite: http://rilwis.googlecode.com/svn/trunk/demo/image-slider.html Was ich bisher gefunden habe CSS3-Übergangsverzögerung , eine Möglichkeit, Auswirkungen auf Elemente zu verzögern. Funktioniert nur beim Schweben. CSS3 Keyframe , arbeitet unter …
8
Stoppen einer CSS3-Animation im letzten Frame
Ich habe eine 4-teilige CSS3-Animation, die per Klick abgespielt wird - aber der letzte Teil der Animation soll sie vom Bildschirm entfernen. Es kehrt jedoch immer zu seinem ursprünglichen Zustand zurück, sobald es gespielt hat. Jeder weiß, wie ich es auf seinem letzten CSS-Frame (100%) stoppen kann oder wie man …
8
CSS3 Spin Animation
Ich habe einige Demos überprüft und habe keine Ahnung, warum ich den CSS3-Spin nicht zum Laufen bringen kann. Ich verwende die neueste stabile Version von Chrome. Die Geige: http://jsfiddle.net/9Ryvs/1/ div { margin: 20px; width: 100px; height: 100px; background: #f00; -webkit-animation-name: spin; -webkit-animation-duration: 40000ms; -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: linear; -moz-animation-name: spin; -moz-animation-duration: …
9
CSS: Animation vs. Übergang
Ich verstehe also, wie man sowohl CSS3-Übergänge als auch Animationen durchführt. Was nicht klar ist und ich gegoogelt habe, ist, wann ich welche verwenden soll. Wenn ich zum Beispiel einen Ball zum Abprallen bringen möchte, ist klar, dass Animation der richtige Weg ist. Ich könnte Keyframes bereitstellen und der Browser …
9
Imitieren eines Blink-Tags mit CSS3-Animationen
Ich möchte wirklich, dass ein Textstück im Stil der alten Schule blinkt, ohne Javascript oder Textdekoration zu verwenden. Keine Übergänge, nur * blink *, * blink *, * blink *! BEARBEITEN : Dies unterscheidet sich von dieser Frage, da ich nach einem Blinken ohne kontinuierliche Übergänge frage , während das …
30
Verschwommener Text nach Verwendung der CSS-Transformation: scale (); in Chrome
Anscheinend gab es kürzlich ein Update für Google Chrome, das nach dem Ausführen von a unscharfen Text verursacht transform: scale(). Konkret mache ich das: @-webkit-keyframes bounceIn { 0% { opacity: 0; -webkit-transform: scale(.3); } 50% { opacity: 1; -webkit-transform: scale(1.05); } 70% { -webkit-transform: scale(.9); } 100% { -webkit-transform: scale(1); …
5
Spielen Sie mehrere CSS-Animationen gleichzeitig ab
Wie kann ich zwei CSS-Animationen mit unterschiedlicher Geschwindigkeit abspielen lassen ? Das Bild sollte sich gleichzeitig drehen und wachsen. Die Drehung erfolgt alle 2 Sekunden. Das Wachstum erfolgt alle 4 Sekunden. Beispielcode: .image { position: absolute; top: 50%; left: 50%; width: 120px; height: 120px; margin:-60px 0 0 -60px; -webkit-animation:spin 2s …
4
Die CSS-Animationseigenschaft bleibt nach der Animation erhalten
Ich versuche, eine CSS-Animationseigenschaft nach Abschluss beizubehalten. Ist dies möglich? Das versuche ich zu erreichen ... Das Element sollte ausgeblendet werden, wenn der Benutzer auf der Seite landet. Nach 3 Sekunden (oder was auch immer) sollte es eingeblendet werden und nach Abschluss der Animation dort bleiben. Hier ist ein Geigenversuch …
11
Verzögerung der CSS-Animation beim Wiederholen
Ich habe kürzlich herausgefunden, wie man CSS-Animationen "richtig" verwendet (zuvor habe ich sie als nicht in der Lage abgetan, komplexe Sequenzen wie in JavaScript zu erstellen). Jetzt lerne ich etwas über sie. Für diesen Effekt versuche ich, einen Gradienten "Flare" über ein Fortschrittsbalken-ähnliches Element streichen zu lassen. Ähnlich wie bei …
2
Rotierender Globus in CSS
Ich erstelle einen rotierenden Erdeffekt in CSS. Ich habe den Globus in CSS erstellt: body { background-color: #111; } #earth { width: 300px; height: 300px; background: url(https://web.archive.org/web/20150807125159if_/http://www.noirextreme.com/digital/Earth-Color4096.jpg); border-radius: 50%; background-size: 610px; box-shadow: inset 8px 36px 80px 36px rgb(0, 0, 0), inset -6px 0 12px 4px rgba(255, 255, 255, 0.3); animation-name: …
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.