Is it possible to use keyframes animation to pseudo-element?
15,904
Firefox, Chrome, and IE10+ support this.
See more info at Chris Coyier's site: http://css-tricks.com/transitions-and-animations-on-css-generated-content/
Related videos on Youtube
Comments
-
yshrsmz over 1 year
is it possible to use css keyframes animation to pseudo-element such as 'before' and 'after'? I am developing webservice for smartphone, and want to blink element. but do not want to blink element itself. so, ways I came up with are two; one is to cover element with another element, and blink that element; and another is to use pseudo-element, but it seems not working.
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:
<div class="fadeElement"></div>
-
Sampson over 11 yearsInternet Explorer 10 also animates pseudo-elements.