2012-05-29 57 views
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:

回答