CODEWITHSUNDEEP
csspseudo-elementcss-animations
yshrsmz
yshrsmz

Reputation: 1179

Is it possible to use keyframes animation to pseudo-element?

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>

Upvotes: 14

Views: 20017

Answers (1)

paulslater19
paulslater19

Reputation: 5917

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/

Upvotes: 11

Related Questions