Tôi đã thực hiện một Fiddle để tham khảo: http://jsfiddle.net/xypQY/Áp dụng hiệu ứng chuyển tiếp WebKit để Pseudo Elements
Những yếu tố tôi sẽ áp dụng chuyển WebKit trên để đạt được một hiệu ứng Fade In sử dụng độ mờ đục?
Đây là lỗi webkit, quá trình chuyển đổi không hoạt động trong Chrome hoặc Safari trên phần tử giả.
Hãy ngôi sao lỗi này để hy vọng giúp bóng được lăn trên một sửa chữa:
Issue 54699: CSS3 transition not applied for pseudo elements
Nó đã được báo cáo cho Webkit:
Bug 23209 - Transitions and animations do not apply to CSS generated content
vì vậy hy vọng nó sẽ được cố định Sớm.
UPDATE: Hỗ trợ cho quá trình chuyển đổi đã được thêm vào WebKit trên 2013/01/02: https://trac.webkit.org/changeset/138632
Webkit hiện đã thêm hỗ trợ cho việc này: http://trac.webkit.org/changeset/138632 –
Dường như vẫn còn nhưng vẫn tồn tại trong Safari, nhưng có một giải pháp thay thế: http://kizu.ru/en/pseudos/ – kirilloid
Cuối cùng lỗi là cố định trong Google Chrome.
Bạn có thể bắt đầu sử dụng transitions trên các yếu tố giả, hầu hết Chromes đã cập nhật khi vào ngày 24, 2013.
Waiting for Safari để kéo các bản cập nhật.
Dường như không thể thực hiện được. http://jsfiddle.net/xypQY/1/ – Gerben
có thể trùng lặp của [Cách bật -webkit-animation/transition-property cho: before and: after pseudo elements?] (http://stackoverflow.com/questions/3855079/how-to-enable-webkit-animation-transition-property-for-before-and-after-pseud) – mario
sở hữu bản sao của http://stackoverflow.com/questions/9798010/css-transitions-with-before-and -after-pseudo-elements – Dan