Можно ли использовать анимацию ключевых кадров для псевдоэлементов?

можно ли использовать анимацию ключевых кадров css для псевдоэлементов, таких как "до" и "после"? Я разрабатываю веб-сервис для смартфона и хочу мигать элементом. но не хочу мерцать сам элемент. Итак, способов, которые я придумал, два; один — покрыть элемент другим элементом и мигать этим элементом; а другой - использовать псевдоэлемент, но, похоже, он не работает.

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>