title: Is it possible to use keyframes animation to pseudo-element?
body: <p>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.</p>
  
  <p>css:</p>
  
  <pre><code>.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;
    }
  }
  </code></pre>
  
  <p>html:</p>
  
  <pre><code>&lt;div class="fadeElement"&gt;&lt;/div&gt;
  </code></pre>