Spielen CSS hover-animation auf, pause auf hover aus

Ich versuche,

  • SPIELEN animation auf schweben.
  • PAUSE-animation auf hover-out (ich.e kehren Sie nicht zurück zu frame 0).

Ist es nicht möglich -webkit-animation-play-state: paused; auf eine parent-div?

Finden Sie eine Beispiel hier, wenn Sie die Maus aus geht es zurück zu frame 0.

Ich will nicht von JS.

InformationsquelleAutor Neo | 2012-01-12
  1. 11

    Beispiel jsfiddle

    legen Sie die animation auf #tech mit spielen Zustand angehalten

    #tech {
    -webkit-animation-play-state:paused;
    -webkit-animation: moveSlideshow 10s linear infinite;
}

    ändern Sie dann spielen-Staat ausführen, die auf hover

    #tech:hover{
    -webkit-animation-play-state:running;
}
    • Nette demo btw. +1 Hier ist ein Mozilla addon 😉 jsfiddle.net/fRzwS/113
    • danke, kann nicht glauben ich verpasste es, roXon, die Sie brauchen -moz-Präfix für firefox
    • Ich weiß... das War einfach nur verändert es in der demo. (edited Kommentar oben)
    • oh ok, cheers, Bild ist von css-tricks.com
    • Es funktioniert nicht unter Chrome. Das Bild bewegt sich die ganze Zeit.
    • Sie brauchen die pause-Zustand, nachdem die animation sonst funktioniert es nicht

    InformationsquelleAutor MikeM
  2. 3

    Ich war auf der Suche für diese als gut, und @MikeM's Antwort hat mich, wo ich brauchte, um zu gehen, und mit @HellGate's Kommentar auf diese Antwort über Chrome:

    müssen Sie den pause-Zustand, nachdem die animation sonst funktioniert es nicht

    War ich interessiert, wie man in den pause-animation auf eine PNG-sprite-Blatt, wenn es inaktiv war, und weiter/wieder auf zu schweben, so dass die akzeptierte Antwort geholfen in dieser Hinsicht.

    Hier ist eine demo zeigen, wie dies getan werden kann auf eine PNG-Sprite-Sheet (credits, um das sprite, und die original-CSS-gehen Sie zu Guil-Hernandez und seine awesome blog post hier): CodePen.

    Wichtigen CSS-Teile:

    .monster {
  width: 190px;
  height: 240px;
  margin: 2% auto;
  background: url('http://treehouse-code-samples.s3.amazonaws.com/CSS-DD/codepen/blog/monster.png') left center;
  -webkit-animation: monsterAnimation .8s steps(10) infinite;
  animation: monsterAnimation .8s steps(10) infinite;
  -webkit-animation-play-state: paused;  /* Chrome, Safari, Opera */
  animation-play-state: paused;
}

.monster:hover {
  -webkit-animation-play-state: running;
  animation-play-state: running;
}

@keyframes monsterAnimation {
  100% { background-position: -1900px; }
}
    InformationsquelleAutor JohnnyCoder
  3. 0

    Überprüfen Sie die JSFiddle hier: http://jsfiddle.net/fRzwS/373/.

    Die animation nicht stoppen, weil die spät-definition von animation überschreibt den Wert der Immobilie animation-play-state. Nach der W3C-Spezifikation, animation:

    The 'animation' shorthand property is a comma-separated list of 
  animation definitions, each of which combines seven of 
  the animation properties into a single component value.

    Und die sieben Eigenschaften sind:

    <single-animation> = <single-animation-name> || <time> 
  || <single-animation-timing-function> 
  || <time> || <single-animation-iteration-count> || <single-animation-direction> 
  || <single-animation-fill-mode> || <single-animation-play-state>

    Ist es ähnlich, die Eigenschaften background und background-color.

    Also in den originalen code:

    #tech {
    -webkit-animation-play-state: paused;
    -webkit-animation: moveSlideshow 10s linear infinite;
}

    Eigenschaft animation-play-state ist paused. Jedoch, die spät-Eigenschaft animation ÜBERSCHREIBT dieser Wert durch den Standardwert running. So können Sie entweder die Eigenschaft definieren animation-play-state später (http://jsfiddle.net/fRzwS/373/):

    #tech {
    -webkit-animation: moveSlideshow 10s linear infinite;
    -webkit-animation-play-state:paused;
}

    Oder Sie können einfach verwenden (http://jsfiddle.net/fRzwS/374/):

    -webkit-animation: moveSlideshow 10s linear infinite paused;

    Hier ist ein weiteres Beispiel, das funktioniert sowohl in Chrome und Firefox: http://jsfiddle.net/MaY5A/694/

    InformationsquelleAutor Joy
  4. 0

    Habe ich nicht genug Ruf zu Kommentar andere Antworten. Gut. @MikeM 's Weg funktioniert, aber er hat einen kleinen Fehler. Aussehen:

    #tech {
    -webkit-animation-play-state:paused;
    -webkit-animation: moveSlideshow 10s linear infinite;
}

    Dies nicht funktioniert und das sollte auch nicht funktionieren. Animation Kurzschrift Hinweis: überschreibt animation-play-state. Sie müssen neu anordnen, diese strings, um es arbeiten

    InformationsquelleAutor Михаил Чеберя
Schreibe einen Kommentar