8
'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:
のInternet Explorer 10はまた、擬似要素をアニメーション化します。 – Sampson