Có thể sử dụng hoạt ảnh khung hình chính thành phần tử giả không?

Question

có thể sử dụng hoạt ảnh khung hình css thành phần tử giả như 'trước' và 'sau' không? Tôi đang phát triển dịch vụ web cho điện thoại thông minh và muốn nhấp vào yếu tố. nhưng không muốn tự chớp mắt. vì vậy, cách tôi đưa ra là hai; một là bao gồm phần tử với phần tử khác và nhấp vào phần tử đó; và cách khác là sử dụng phần tử giả, nhưng có vẻ như không hoạt động.

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:

Answer 1

Firefox, Chrome, và IE10 + hỗ trợ này.

Xem thêm thông tin tại trang web của Chris Coyier: http://css-tricks.com/transitions-and-animations-on-css-generated-content/