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/

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

1 个答案: