para - como hacer animaciones en html5 y css3

Debería: el cambio de estilo del pseudo estado de desplazamiento funciona después de que se completa la animación CSS

Question

¿Deberían los cambios de estilo especificados en un pseudo estado, como :hover después de que una animación CSS haya terminado de ejecutarse en el elemento?

EDITAR: Quizás más pertinente, debería preguntar: ¿por qué la aplicación de ''reenvíos'' en una animación evita que se anule un cambio de estilo más específico?

EDITAR 2: Resulta que esto es en realidad un problema de navegador cruzado. Por ejemplo, Chrome (estaba ejecutando la versión 38.0.2125.111) se comporta de forma incorrecta pero Firefox lo maneja según las especificaciones.

Larga historia corta: De acuerdo con las especificaciones (según lo citado por chrona a continuación), agregar !important para la anulación debe representar el estilo. Sin embargo, en la actualidad, solo Firefox maneja esto correctamente.

Aquí hay una reducción:

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

No puedo encontrar información relacionada con esto, nada en la especificación: http://www.w3.org/TR/css3-animations/

¿Alguien sabe si a) esto debería ser posible? b) ¿Cómo hacer que los estados flotantes funcionen en un elemento una vez que finaliza la animación?

Answer 1

Citado del borrador de trabajo de animaciones CSS

Las animaciones CSS afectan los valores de las propiedades calculadas. Durante la ejecución de una animación, el valor computado para una propiedad es controlado por la animación. Esto anula el valor especificado en el sistema de estilo normal. Las animaciones anulan todas las reglas normales, pero son anuladas por reglas importantes .

y un poco más abajo ( Duración de la animación ):

[…] Y una animación que se llena hacia adelante conservará el valor especificado en el fotograma clave al 100%, incluso si la animación fue instantánea. Además, los eventos de animación todavía se disparan.

Como está animando el background , no se puede anular de forma predeterminada (a excepción de las reglas importantes). Si no quieres usar !important , debes seguir la respuesta de LcSalazar . (Actualmente, solo Firefox reacciona como se describe en las especificaciones [6 de noviembre de 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>

Answer 2

En realidad no entiendo realmente su pregunta, ¿puede ser que necesite los efectos como este? 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;
}

Sin embargo, con estos códigos, cuando pasas el mouse por el texto, la animación se reproducirá.

Answer 3

• una)

Acerca de por qué sucede, no puedo decir con seguridad. Pero, obviamente, está relacionado con la propiedad de animation-fill-mode que está configurando para ser forwards . Eso, por definición, establece el estilo visual del elemento como el último fotograma clave de la animación:

hacia adelante
Una vez que finaliza la animación (según lo determinado por su animación-iteración-cuenta), la animación aplicará los valores de propiedad para el momento en que finalizó la animación.

La definición de MDN es un poco más clara:

hacia adelante
El objetivo conservará los valores calculados establecidos por el último fotograma clave encontrado durante la ejecución. El último fotograma clave encontrado depende del valor de animación-dirección y animación-iteración-cuenta:

Pero no sé por qué no permite que el estado de "desplazamiento" anule los estilos.

• segundo)

Ahora, acerca de cómo hacer que funcione, puede eliminar la propiedad de forwards de la animación. En este caso, deberá revertir la animación, de modo que el estado original del elemento (cuando finaliza la animación y elimina el efecto visual), es el color que desea que se arregle:

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