【버그】 Chrome에서 CSS 애니메이션이 잘 그려지지 않음

하고 싶은 일

뒤표에 문자가 적힌 카드( 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);
  }
}

Reference

이 문제에 관하여(【버그】 Chrome에서 CSS 애니메이션이 잘 그려지지 않음), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/rainbartown/items/307d43473065089f4696

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다