하고 싶은 일

뒤표에 문자가 적힌 카드( div#card )에 회전하는 애니메이션을 붙인다.

증상

뒷면( div.back )이 잘 그려지지 않는다.

발생 조건

backface-visibility: hidden 를 지정하는 요소에 회전 애니메이션을 적용하면 발생합니다.

Blink의 버그로 보인다.

Chrome 76.0.3809.132

Opera 63.0.3368.66
그럼 발생.

Firefox 68.0.2
그럼 발생하지 않고.

대책

@keyframes 내에서 z-index: auto 등을 명시적으로 지정하여 재그리기를 촉구한다.

CSS

@keyframes rotate {
  from {
    z-index: auto;  /* これを追加 */
    -webkit-transform: rotate(0);
    transform: rotateY(0);
  }
  to {
    -webkit-transform: rotate(360deg);
    transform: rotateY(360deg);
  }
}

샘플 코드

HTML/CSS

HTML

<div id="card">
  <div class="front">Front</div>
  <div class="back">Back</div>
</div>

CSS

#card {
  width: 300px;
  height: 100px;
  perspective: 1000px;
}

.front,
.back {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  color: white;
  font-size: 60px;
  text-align: center;
}

.front {
  background-color: teal;
  -webkit-animation: rotate 4s linear infinite;
  animation: rotate 4s linear infinite;
}

.back {
  background-color: orangered;
  -webkit-animation: rotate 4s linear -2s infinite;
  animation: rotate 4s linear -2s infinite;
}

@keyframes rotate {
  from {
    z-index: auto;  /* これを追加 */
    -webkit-transform: rotate(0);
    transform: rotateY(0);
  }
  to {
    -webkit-transform: rotate(360deg);
    transform: rotateY(360deg);
  }
}