[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

我已经尝试过类似的操作，并且发现了一种更简单的方法来执行此操作，如果您可以尝试使用这种方法，也许这可能有助于简化您想做的事情

try this out!