Glatte CSS Transition Animation Rotation

Erstellt habe ich dieses tüfteln, um das problem zu demonstrieren:

http://jsfiddle.net/NfX56/

Animation-DREHUNG und SCHWEBEN scheint gut zu funktionieren für die Richtung ändern, aber das UMSCHALTEN, wenn ich den Cursor über das Element für den übergang ist sprunghaft und nicht eine glatte Umkehrung der Richtung wie ich es gerne hätte.

Hier ist der basic-code ohne browser-Präfix:

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
.spin {
    animation: spin 3.5s linear 0s infinite normal;
    width: 100px;
    height: 100px;
    border-radius: 50px 50px 50px 50px;
    overflow: hidden;
    margin-left: -50px;
    margin-top: -50px;
    top: 50%;
    left: 50%;
    position: absolute;
}
.spin:hover {
    animation: spin 3.5s linear 0s infinite reverse;
}

Habe ich versucht zu spielen, um mit den folgenden:

transition-property: transform;
transition-duration: 0s;
transition-timing-function: ease-in-out;

In einem Versuch, glätten Sie die animation so, dass das symbol glatt umgedreht, aber ich kann nicht ganz scheinen, um es richtig... jede Hilfe wäre toll!

http://jsfiddle.net/NfX56/

  • Was verursacht die snappong Aktion: 0% = 0 und 100% = 360°. Wenn Sie diesen Vorgang umkehren, auf hover-es wird snap um 360°, wie es ist einfach die Umkehrung der keyframes. Das ist, warum, wenn Sie den Mauszeiger über Sie, wenn es an diesem Punkt werden Sie sehen, es ist glatt.
  • Ich habe versucht, ADDNIG: @keyframes spinreverse { 0% { transform: rotate(360deg); } 100% { transform: rotate(0deg); } } UND .spin:hover { animation: spinreverse 3,5 s linear 0s infinite normal; } Jetzt springt er zurück auf die ursprüngliche position... wie bekomme ich eine glatte umgekehrter Richtung wirkt??? habe auch versucht -360deg für die 100% zu Verwandeln, war ein wenig glatter, aber springt immer noch ein bisschen
  • unabhängig der oben genannten Möglichkeiten erlauben nur das symbol, um zu springen zurück in seine ursprüngliche position, das ist glatter, aber nicht glatt in umgekehrter Richtung wie ich möchte... wenn das nicht möglich ist, in CSS ich wäre offen für eine javascript-Lösung....
InformationsquelleAutor Go Nate | 2013-08-01
  1. 15

    Musste ich viel denken, lösen Sie Ihre Anfrage; ich habe aber endlich eine Lösung finden,

    demo

    Den entsprechenden CSS-code :

    .spin {
    animation: spin 2s linear 0s infinite reverse;
    -moz-animation: 2s linear 0s reverse none infinite spin;
    -webkit-animation: spin 2s linear 0s infinite reverse;
    -0-animation: spin 2s linear 0s infinite reverse;
    -webkit-animation-play-state: paused;
    -o-animation-play-state: paused;
    -moz-animation-play-state: paused;
    animation-play-state: paused;
}
.spin:hover {
    -webkit-animation-play-state: running;
    -o-animation-play-state: running;
    -moz-animation-play-state: running;
    -webkit-animation-play-state: running;
}
.yin-yang {
    animation: spin 4s linear 0s infinite normal;
    -moz-animation: 4s linear 0s normal none infinite spin;
    -webkit-animation: spin 4s linear 0s infinite normal;
    -0-animation: spin 4s linear 0s infinite normal;
}

    Der trick: da Sie bereits 2 Elemente (spin-und yin-yang) ich einer von Ihnen zu drehen, in eine Richtung, und die andere zu drehen, in umgekehrter Richtung, und vieles mehr schnell. Wenn beide ausgeführt werden, der Netto-Effekt ist zum drehen in die eine Richtung, wenn Sie nur gedreht wird, ist die Netto-Effekt ist das Gegenteil.

    Nun, das einzige, was übrig bleibt, ist zum anhalten und starten der schnellen rotation (die Einstellung nicht zurücksetzen es !)

    Erkannt, ein Fehler auf den oben, die vierte Zeile .spin:hover sollte das un-Präfix:

    .spin:hover {
    -webkit-animation-play-state: running;
    -o-animation-play-state: running;
    -moz-animation-play-state: running;
    animation-play-state: running;
}

    korrigiert demo

    Hinzufügen ein zusätzliches element in der HTML, die ich in der Lage gewesen, die rotation ändern, glatt.

    reibungslosen übergang demo

    Dem extra-CSS ist:

    .acc {
    transition: all 4s ease-out;
}
.spin:hover .acc {
    -webkit-transform: rotate(-360deg);
    transform: rotate(-360deg);
}
    • A+ FUNKTIONIERT auf FIREFOX you ROCK!!!!!!!!
    • Wenn Sie änderungen an der animation Zeit zu Zeit werden die gleichen (sprich: 2s) die animation friert in der position war es in, wenn Sie mit der Maus auf... irgendwie ein Cooler Effekt! css-Animationen sind lustig!!!! vielen Dank für die Hilfe vals!
    • es ist ein bisschen ein Fehler in chrome, wenn die Maus schnell, wo das symbol erscheint, glitch und springen möglich, weil die animation beginnt bei 360deg und endet bei 0?
    • funktioniert nicht im Explorer... große überraschung!
    • Sorry für die späte Antwort, ich war auf Urlaub 🙂 ich habe korrigiert der IE-Problem, es war ein blöder Fehler. Ich sehe nicht den glitch in Chrom; kann sein das es depens auf etwas anderes. Was ich fast suer ist, dass es nicht davon abhängen, dem Wechsel von 360 auf 0.
    • Ich habe die Untersuchung der glith in Chrom. Noch nicht finden, etwas über es, aber in der Arbeit habe ich einen Weg finden, um eine glatte änderung in der Drehzahl; siehe neue demo.
    • Das ist krank! Nice job!
    • Oh my.. das ist toll!

    InformationsquelleAutor vals
  2. 2

    gut, dies:

    css:

    #test {
    margin: 100px;
    height: 200px; width: 200px;
    background: black;
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
    -ms-transition: all 1s ease;
    transition: all 1s ease;
}

#test:hover {
    background: gray;
    -webkit-transform: rotate(1080deg);
    -moz-transform: rotate(1080deg);
    -o-transform: rotate(1080deg);
    -ms-transform: rotate(1080deg);
    transform: rotate(1080deg);

    -webkit-border-radius: 100px;
    -moz-border-radius: 100px;
    border-radius: 100px;
}

    html:

    <div id="test"></div>

    DEMO

    Das problem, dass Sie aufgrund der Langsamkeit des übergangs. Da kann css haben keine Logik, wenn Sie mit der elm wieder auf "0" oder "360" oder was immer Ihr setup war. So wird nie glatt sein, denn css kann nicht wissen, was das Letzte war "deg num" vor der hover passiert...

    Jedoch! Sie können versuchen, stylus

    "Stylus verfügt über leistungsfähige in-Sprache-Funktion Definitionen."

    Hoffe, diese Hilfe :/

    • Cool, ich mag deine demo! Ich denke, mit übergang ist eine bessere Methode beim übergang von einem statischen Zustand zu einem anderen, es scheint nur, dass mit Animationen, vielleicht ist es nicht möglich ein Objekt übergang reibungslos ohne springen zurück zu seinem ursprünglichen Punkt. Ich werde Blick in die javascript-Funktion zur Verarbeitung dieses feature
    InformationsquelleAutor Darkagelink
Schreibe einen Kommentar