8
是否有可能使用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:
的Internet Explorer 10還動畫僞元素。 – Sampson