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.
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...
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:...
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,...
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...
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;...
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...
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...
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); }...
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%;...
Etwas so Einfaches sollte leicht zu erreichen sein, aber ich ziehe mir die Haare aus, wie kompliziert es ist. Ich möchte nur das Ein- und Aushängen einer React-Komponente animieren, fertig. Folgendes habe ich bisher versucht und warum nicht jede Lösung funktioniert: ReactCSSTransitionGroup - Ich...
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...
Ich versuche, eine Ellipse zu animieren, und habe mich gefragt, ob dies mit CSS-Animationen möglich ist ... So könnte es sein Loading... Loading.. Loading. Loading... Loading.. Und im Grunde einfach so weitermachen. Irgendwelche Ideen? Bearbeiten: wie folgt :
Ich habe mich umgesehen, kann aber nicht ganz finden, wonach ich suche. Ich habe derzeit eine CSS-Animation auf meiner Seite, die ausgelöst wird durch: hover. Ich möchte, dass dies in "Klicken" oder "Berühren" geändert wird, wenn die Größe der Seite mithilfe von Medienabfragen über die Breite...
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...
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%;...
Ich versuche, mit CSS eine Animation im Achterbahnstil zu erstellen. Ich möchte wissen, wie man den "Untersetzer" krümmt, wenn er sich in der Schleifenphase befindet. Ich bin auf der Suche nach einer All-CSS-Lösung, aber wenn ein bisschen JavaScript benötigt wird, bin ich damit einverstanden. Mein...