Powinieneś: zawiesić pseudo-stanową zmianę stylu po zakończeniu animacji CSS

Question

Czy zmiany stylu określone w pseudo stanie, takim jak :hover, działają po ukończeniu animacji CSS na elemencie?

EDYCJA: Być może bardziej trafnie, powinienem zapytać: dlaczego zastosowanie "forwardów" w animacji zapobiega zmianie stylu z nadrzędnego?

EDYCJA 2: Okazuje się, że jest to w rzeczywistości problem z przeglądarką. Na przykład. Chrome (używałem wersji 38.0.2125.111) zachowuje się niepoprawnie, ale Firefox obsługuje go zgodnie ze specyfikacją.

Krótka historia: zgodnie ze specyfikacją (cytowane poniżej przez chrona) dodanie do nadpisania !important powinno spowodować, że styl zostanie wyświetlony. Jednak obecnie tylko Firefox obsługuje to poprawnie.

Tutaj jest redukcja:

@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>

jestem w stanie znaleźć informacje odnoszące się do tego, nic w ciemno albo: http://www.w3.org/TR/css3-animations/

Ktoś wie, czy a) ten powinien dać? b) jak sprawić, aby stany najechania działały na elemencie po zakończeniu animacji?

Answer 1

• )

o tym, dlaczego tak się dzieje, nie mogę stwierdzić na pewno. Ale oczywiście jest to związane z usługą animation-fill-mode, którą ustawiłeś na forwards. Że z definicji ustawia styl wizualny elementu być ostatnią klatką animacji:

przodu
Po zakończeniu animacji (jak określa jej animacji-iteracji-count), animacja zastosuje wartości właściwości do czasu zakończenia animacji.

MDN's definition jest nieco bardziej jasne:

przodu
Cel zachowa wartości obliczone ustawiony przez ostatnie klatki kluczowej napotkanych w trakcie realizacji. Ostatnia klatka kluczowa napotkał zależy od wartości i kierunku animacji animacji-iteracji-count:

Ale nie wiem, dlaczego nie pozwolić stan :hover zastąpić style.

• b)

Teraz, jak zrobić to działa, można usunąć właściwość forwards od animacji.W takim przypadku musisz odwrócić animację, więc oryginalny stan elementu (po zakończeniu animacji i usunięciu efektu wizualnego) jest kolorem, który ma zostać naprawiony:

@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

Właściwie to nie rozumiem twojego pytania, może potrzebujesz takich efektów? 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; 
} 

Jednak z tych kodów, kiedy mouseOut tekst, animacja będzie powtórka.

Answer 3

cytat z CSS Animations Working Draft

animacji CSS wpływają obliczonych wartości nieruchomości. Podczas wykonywania animacji obliczona wartość właściwości jest kontrolowana przez animację. Przesłoni to wartość określoną w normalnym systemie stylizacji. Animacje zastępują wszystkie normalne reguły, ale są przesłonięte przez! Ważne zasady.

i nieco dalej w dół (Animation Duration)

[...] i animacja wypełnia przodu zachowuje wartość podaną w 100% klatki kluczowej, nawet jeśli animacja była natychmiastowa. Ponadto zdarzenia związane z animacją są nadal uruchamiane.

Podczas animacji background nie można jej domyślnie przesłonić (z wyjątkiem! Ważnych reguł). Jeśli nie chcesz używać !important powinieneś przejść przez LcSalazar's answer. (Obecnie tylko Firefox reaguje w sposób opisany w specyfikacji [06 listopad 2014])

@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>