Sollte: schweben Pseudo-Status Stil ändern Arbeit nach dem Abschluss der CSS-Animation

Question

Sollte Stil Änderungen an einem Pseudo-Status wie :hover arbeiten, nachdem eine CSS-Animation auf dem Element ausgeführt wurde ausgeführt?

EDIT: Vielleicht besser, ich sollte fragen: Warum verhindert die Anwendung von "vorwärts" auf eine Animation eine spezifischere Stiländerung von überschreiben?

EDIT 2: Stellt sich heraus, dass dies tatsächlich ein Cross-Browser-Problem ist. Z.B. Chrome (ich habe Version 38.0.2125.111 ausgeführt) verhält sich nicht korrekt, aber Firefox behandelt es gemäß den Spezifikationen.

Long story short: Nach den Spezifikationen (wie von chrona unten zitiert) hinzufügen !important der override sollte den Stil rendern. Derzeit wird dies jedoch nur von Firefox korrekt gehandhabt. Hier

ist eine Reduktion:

@keyframes go { 
 
    0% { 
 
    background: green; 
 
    } 
 
    100% { 
 
    background: pink; 
 
    } 
 
} 
 

 
@-webkit-keyframes go { 
 
    0% { 
 
    background: green; 
 
    } 
 
    100% { 
 
    background: pink; 
 
    } 
 
} 
 

 
.box { 
 
    animation: go 3s forwards; 
 
    -webkit-animation: go 3s forwards; 
 
    
 
} 
 

 
.box:hover { 
 
    background: orange!important; 
 
    cursor: pointer; 
 
}

<div class="box">Hover states don't work after animation</div>

Ich bin nicht in der Lage, Informationen zu finden diesbezüglich nichts in der Spezifikation entweder: http://www.w3.org/TR/css3-animations/

Jeder weiß, wenn a) dies sollte möglich sein? b) Wie man Hover-States an einem Element arbeiten lässt, wenn die Animation endet?

Answer 1

• a)

Über warum ist es passiert, kann ich nicht sicher sagen,. Aber es hängt offensichtlich mit der Eigenschaft animation-fill-mode zusammen, die Sie als forwards festlegen. Der per Definition setzt den visuellen Stil des Elements die letzte Keyframe der Animation zu sein:

vorwärts
nachdem die Animation endet (wie durch seine Animation-Iteration-Zählung bestimmt wird), die Animation wendet die Eigenschaftswerte für die Zeit an, in der die Animation beendet wurde.

MDN's definition ist etwas deutlicher:

vorwärts
Das Ziel wird die berechneten Werte durch den letzten Key-Frame während der Ausführung aufgetreten beibehalten. Der letzte Keyframe hängt vom Wert der Animation-Richtung und traf Animation-Iteration-count:

Aber ich weiß nicht, warum es nicht der Staat :hover erlaubt die Stile außer Kraft zu setzen. Jetzt

• b)

, darüber, wie es funktioniert, könnten Sie die forwards Eigenschaft aus der Animation entfernen.In diesem Fall müssen Sie die Animation umkehren, so den ursprünglichen Zustand des Elements (wenn die Animation beendet ist, und entfernt den sichtbaren Effekt), ist die Farbe, die Sie es festgelegt werden sollen:

@keyframes go { 
 
    0% { 
 
    background: pink; 
 
    } 
 
    100% { 
 
    background: green; 
 
    } 
 
} 
 

 
@-webkit-keyframes go { 
 
    0% { 
 
    background: pink; 
 
    } 
 
    100% { 
 
    background: green; 
 
    } 
 
} 
 

 
.box { 
 
    animation: go 2s; 
 
    -webkit-animation: go 2s; 
 
    -webkit-animation-direction: reverse; 
 
    animation-direction: reverse; 
 
    background: pink; 
 
} 
 

 
.box:hover { 
 
    background: orange; 
 
    cursor: pointer; 
 
}

<div class="box">Hover states don't work after animation</div>

Answer 2

Eigentlich verstehe ich deine Frage nicht wirklich, vielleicht brauchen Sie die Effekte so? http://jsfiddle.net/abruzzi/5td8w6jx/

@keyframes go { 
    0% { 
     background: green; 
    } 
    100% { 
     background: pink; 
    } 
} 
@-webkit-keyframes go { 
    0% { 
     background: green; 
    } 
    100% { 
     background: pink; 
    } 
} 


.box { 
    animation: go 3s forwards; 
    -webkit-animation: go 3s forwards; 
} 
.box:hover { 
    -webkit-animation: none; 
    background: orange; 
    cursor: pointer; 
} 

jedoch mit diesen Codes, wenn Sie den Text mouseOut, wird die Animation Wiederholung sein.

Answer 3

von den Affekt CSS Animations Working Draft

CSS Animationen Zitiert Eigenschaftswerte berechnet. Während der Ausführung einer Animation wird der berechnete Wert für eine Eigenschaft von der Animation gesteuert. Dies überschreibt den im normalen Stylingsystem angegebenen Wert. Animationen überschreiben alle normalen Regeln, werden aber durch! Wichtige Regeln überschrieben.

und etwas weiter unten (Animation Duration):

[...] und eine Animation, die nach vorne füllt den Wert auf 100% Keyframe angegeben beibehalten, auch wenn die Animation momentaner war. Animationsereignisse werden weiterhin ausgelöst.

Da Sie die background animieren, kann sie nicht standardmäßig überschrieben werden (außer für! Wichtige Regeln). Wenn Sie !important nicht verwenden möchten, sollten Sie LcSalazar's answer gehen. (Zur Zeit nur Firefox reagiert als in den Spezifikationen [6. November 2014] beschrieben)

@keyframes go { 
 
    0% { 
 
    background: green; 
 
    } 
 
    100% { 
 
    background: pink; 
 
    } 
 
} 
 

 
@-webkit-keyframes go { 
 
    0% { 
 
    background: green; 
 
    } 
 
    100% { 
 
    background: pink; 
 
    } 
 
} 
 

 
.box { 
 
    animation: go 3s forwards; 
 
    -webkit-animation: go 3s forwards; 
 
    
 
} 
 

 
.box:hover { 
 
    background: orange !important; 
 
    cursor: pointer; 
 
}

<div class="box">Hover states don't work after animation</div>