Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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>
like image 972
yshrsmz Avatar asked May 29 '12 11:05

yshrsmz


People also ask

Can you animate pseudo elements?

As you have seen, the ::before and ::after pseudo-elements can be used in several different ways to produce interesting animated effects that give life to our designs.

What is the use of keyframes in animation?

Keyframes signify the start and end points for actions in animation. In the early days of animation, each frame of a production had to be drawn by hand.

Can you animate Zindex?

Yes, you can animate z-index ! It's not visually apparent in this demo, but seeing the interpolated values go from 1 to 5 confirms it.

Can an element have 2 animations?

You can specify multiple animations--each with their own properties--with a comma.


1 Answers

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/

like image 183
paulslater19 Avatar answered Oct 26 '22 13:10

paulslater19