¿es posible usar la animación css keyframes para pseudo-elemento como 'antes' y 'después'? Estoy desarrollando un servicio web para teléfonos inteligentes, y quiero un elemento parpadeante. pero no quiero parpadear el elemento en sí. entonces, las formas en que se me ocurrió son dos; uno es para cubrir el elemento con otro elemento, y parpadea ese elemento; y otra es usar pseudo-elemento, pero parece que no funciona.¿Es posible usar la animación de fotogramas clave en un pseudo-elemento?
css:
.fadeElement {
background-color: #000000;
width: 60px;
height: 60px;
}
.fadeElement:after {
display: block;
content: '';
position: relative;
height: 100%;
width: 100%;
z-index: 500;
background-color: rgba(249, 4, 0, 0.5);
animation-name: 'fade';
animation-duration: 2s;
animation-iteration-count: infinite;
-webkit-animation-name: 'fade';
-webkit-animation-duration: 2s;
-webkit-animation-iteration-count: infinite;
}
@keyframes 'fade' {
0% {
opacity: 0;
}
40% {
opacity: 0.5;
}
60% {
opacity: 0.5;
}
100% {
opacity: 0;
}
}
@-webkit-keyframes 'fade' {
0% {
opacity: 0;
}
40% {
opacity: 0.5;
}
60% {
opacity: 0.5;
}
100% {
opacity: 0;
}
}
html:
Internet Explorer 10 también anima a los pseudo-elementos. – Sampson