13

「前」や「後」などの疑似要素にcssキーフレームアニメーションを使用することは可能ですか？スマートフォン向けの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：

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

1 に答える 1

10

Firefox、Chrome、およびIE10+はこれをサポートしています。

Chris Coyierのサイトで詳細を参照してください：http：//css-tricks.com/transitions-and-animations-on-css-generated-content/

于 2012-05-29T12:21:52.950 に答える