Sözde öğeye anahtar kareler animasyonunu kullanmak mümkün mü?

Question

css anahtar kareleri animasyonunu 'önce' ve 'sonra' gibi sözde öğeye kullanmak mümkün mü? Akıllı telefon için web servisi geliştiriyorum ve öğeyi göz kırpmak istiyorum. ancak öğenin kendisini kırpmak istemez. Yani, ortaya koyduğum iki yol var; , bir elemanı başka bir elemanla örtmek ve bu öğeyi kırpmak; ve başka bir sahte öğe kullanmaktır, ancak çalışmıyor gibi görünüyor.

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:

Answer 1

Firefox, Chrome ve IE10 + Bu destekler.

Chris Coyier sitesinde Daha fazla bilgiye bakınız: http://css-tricks.com/transitions-and-animations-on-css-generated-content/