疑似要素にキーフレームアニメーションを使用することはできますか？

Question

'before'や 'after'のようなcss keyframesアニメーションを擬似要素に使用することは可能ですか？ 私はスマートフォン用のWebサービスを開発しており、要素を点滅させたいと考えています。要素自体を点滅させたくありません。 だから、私が思いついたのは2つです。 1つは要素を別の要素でカバーし、その要素を点滅させることです。 ともう1つは擬似要素を使用することですが、動作していないようです。

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の、クロム、およびIE10 +これをサポートしています。

はクリスCoyierのサイトで詳細情報を参照してください：http://css-tricks.com/transitions-and-animations-on-css-generated-content/