CSS animation does not display the elements that are not included in the initial drawing well.

I have a question about CSS animation.
I would like to add a rotating animation to the card with letters on both sides (div.card).
At this time, if you specify backface-visibility: hidden on the back (div.back), the back characters will not appear well even if you rotate and face the table.
I think it's probably because it's not rendered at the time of initial drawing...
Double-click to display (because of character selection).
How do I specify to display it well?

Checked Chrome 76.0.3809.132 for this symptom.
Safari in iOS 12.4.1 could not confirm this symptom.

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

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

.front{
  background-color:teal;
  - webkit-animation:rotate4s linear infinite;
  animation:rotate4s linear infinite;
}

.back{
  background-color:oranged;
  - webkit-animation:rotate4s linear-2s infinite;
  animation:rotate4s linear-2s infinite;
}

@keyframesrotate{
  from {
    - webkit-transform:rotate(0);
    transform —rotateY(0);
  }
  to {
    - webkit-transform:rotate (360 deg);
    transform —rotateY (360 deg);
  }
}

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

css

2022-09-30 11:46

1 Answers

Based on what happens with the code, this is a bug that exists in Google Chrome and may be related to the following issues:

Issue 966019-chromium-An open-source project to help move the web forward.-Monorail

As mentioned in the above article, you can also draw missing parts by re-drawing them one by one.^[1].

^[1]

Forcing a repair more aggressively (for example, by turning on Show Layer Boundaries in the console) does make the elements visible as approve.

Therefore, in this case, redrawing can be done by explicitly declaring the z-index property or the transform-style property (checked by Google Chrome 76.0.3809.132) ^[2].

^[2]

@keyframesrotate{
  from {
    transform —rotateY(0);
    transform-style:flat; /* or z-index:auto;*/
  }
  to {
    transform —rotateY (360 deg);
  }
}

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

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

.front{
  background-color:teal;
  animation:rotate4s linear infinite;
}

.back{
  background-color:oranged;
  animation:rotate4s linear-2s infinite;
}

@keyframesrotate{
  from {
    transform —rotateY(0);
    transform-style:flat; /* add */
  }
  to {
    transform —rotateY (360 deg);
  }
}

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

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

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

.front{
  background-color:teal;
  animation:rotate4s linear infinite;
}

.back{
  background-color:oranged;
  animation:rotate4s linear-2s infinite;
}

@keyframesrotate{
  from {
    z-index:auto; /*add*/
    transform —rotateY(0);
  }
  to {
    transform —rotateY (360 deg);
  }
}

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

Note:

2022-09-30 11:46

If you have any answers or tips

Popular Tags

python x 4566

android x 1593

java x 1484

javascript x 1415

c x 916

c++ x 866

ruby-on-rails x 694

php x 688

python3 x 675

html x 650