是否可以将关键帧动画用于伪元素？

Question

是否可以将css关键帧动画用于伪元素,如'之前'和'之后'？我正在开发智能手机的webservice,并希望闪烁元素.但不想让元素本身闪烁.所以,我提出的方法是两个; 一个是用另一个元素覆盖元素,并使该元素闪烁; 另一种是使用伪元素,但似乎不起作用.

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:

<div class="fadeElement"></div>

Answer 1

Firefox,Chrome和IE10 +支持此功能.

在Chris Coyier的网站上查看更多信息:http://css-tricks.com/transitions-and-animations-on-css-generated-content/