css卡片翻转动画翻转，然后内容闪烁可见

Question

我的网站上有一个卡片翻转动画，卡片显示、图像和标题，当你将鼠标悬停在卡片上时，它会翻转显示内容，内容应该会立即可见，但在翻转动画完成之前，内容会闪烁，无法查看，有人能告诉我为什么吗，我完全被难住了。

这是我的CSS和HTML结构。

.flip__card {
margin-bottom: $multiple;
transform: translate3d(0, 0, 0);
perspective: 1000px;
min-height: 256px;
@include breakpoint(tablet-l) {
margin-bottom: $lg-multiple;
}
img {
max-width: 100%;
height: auto;
margin-bottom: $multiple / 2;
display: block;
@include breakpoint(tablet-l) {
margin-bottom: $lg-multiple / 2;
}
}
}
.flip__card--inner {
position: relative;
width: 100%;
min-height: 256px;
height: 100%;
text-align: center;
transition: transform 0.6s;
transform-style: preserve-3d;
}
.flip__card__label {
min-height: $multiple * 2;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
@include breakpoint(tablet-l) {
min-height: $lg-multiple * 2;
}
}
.flip__card__front,
.flip__card__back {
padding: $multiple / 2;
position: absolute;
width: 100%;
height: 100%;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
border-right: 1px solid $light-grey;
border-bottom: 1px solid $light-grey;
}
.flip__card__front {
text-align: center;
background-color: $white;
}
.flip__card__back {
transform: rotateY(180deg);
background-color: $light-grey;
border-color: $grey;
.member__bio {
overflow: hidden;
position: relative;
height: $multiple * 9;
p {
margin-bottom: 0;
}
@include breakpoint(tablet-l) {
height: $lg-multiple * 9;
p {
margin-bottom: 0;
}
}
}
}
.flip__card:hover .flip__card--inner {
transform: rotateY(180deg);
}

<div class="flip__card">
<div class="flip__card--inner">
<div class="flip__card__front">
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" data-src="{{member.photo.one().getUrl('teamPhoto')}}" alt="{{member.title}}" class="blackAndWhite" />
<div class="flip__card__label">
<h4 class="alt noMargin"><span class="script">{{member.title}}</span></h4>
</div>
</div>
<div class="flip__card__back">
<div class="member__bio">
{{member.bio|widont}} {% if member.linkAuthor is defined and member.linkAuthor|length %} {% include '_partials/common/button' with { 'label':'Title', 'weight':'secondary', 'url':'url' }%} {% endif %}
</div>
<!-- bio -->
</div>
</div>
</div>

在这里你可以看到这会产生什么，

Codepen

Answer 1

我尝试过类似的方法，我发现了一种更简单的方法，如果你想的话，你可以尝试这种方法，也许这可能有助于让你想做的事情更容易

试试这个！