不确定如何实现此过渡/动画

Question

所以我能够创建一个“翻牌”元素；但是，我的问题是我正在尝试使用 transform: scale() 缩放整个元素，以便在旋转大约一半时，我希望元素开始扩展到更大的尺寸/比例。

只是不确定我是使用动画、多个动画还是仅使用过渡...或过渡 + 动画...只是有点困惑什么是最有效的方法。

我尝试了动画 + 过渡，如下图所示，但它非常有问题，而且表现得不可预测。

html, body {
  background: #f2edea;
  height: 100%;
  width: 100%;
}

img {
  width: 100%;
  max-height: 100%;
}

.flipcard {
  width: 150px;
  height: 200px;
  margin: auto;
  top: 20%;
  position: relative;
  box-shadow: 5px 5px 20px #c4c4c4;
  border: 3px solid #b8b8ba;
  border-radius: 5px;
  background: pink;
  transform-style: preserve-3d;
  transition: transform 2s;
} 

@keyframes grow {
  from {
    transform: scale(0);
  }
  to {
    transform: scale(2);
  }
}

.flipcard:hover {
  transform: rotateY(180deg);
  animation: grow 1s; 
}

.front-side  {
  height: 100%;
  width: 100%;
  position: relative;
  backface-visibility: hidden;
  
}

.back-side {
  width: 100%;
  height: 100%;
  transform: rotateY(180deg);
  position: absolute;
  top: 0;
  border-radius: 3px;
}

<div class='flipcard'>
  <div class='front-side'>
    <img src='https://pre00.deviantart.net/4121/th/pre/i/2018/059/6/7/brigitte_by_raikoart-dc4kzas.png'>
  </div>
  <div class='back-side'>
    <img src="https://img00.deviantart.net/e0ec/i/2017/297/8/c/mercy_by_raikoart-dbrm54b.png">
  </div>
</div>

Answer 1

您的主要问题是您在不同的地方使用变换：在悬停状态和动画中。所以一个是压倒另一个造成您的问题。旋转和缩放应该结合在同一个变换属性中，你应该从scale(1)而不是scale(0)开始。然后你应该在动画中添加forwards，这样你就可以在动画结束时保持最后的状态。

---

在您悬停时的初始代码中，旋转被忽略，因为动画的变换将覆盖悬停状态下的变换。然后你将你的元素缩放到 0，这意味着你的元素将有 0 的高度和宽度，你将失去悬停并且你的元素会突然再次出现（因为没有更多的悬停所以没有更多的动画）等等。这是你的闪烁。

你可能会告诉我为什么有时它会起作用？仅仅是因为如果你有一些运气（如果光标靠近中间），动画会在你失去悬停之前继续，然后它就会结束。当动画结束时，将不再考虑缩放和旋转变换。

---

在 Y 轴上旋转元素时要考虑的另一个重要事项：如果旋转为 90deg，那么在此状态下您的元素将具有等于 0 的宽度，并且您也可能再次失去悬停。避免这种情况的一个方法是将悬停添加到容器并旋转子项，这样您就可以确保您永远不会失去悬停，因为容器不会移动。

html,
body {
  background: #f2edea;
  height: 100%;
  width: 100%;
}

img {
  width: 100%;
  max-height: 100%;
}
.container {
  width: 150px;
  height: 200px;
  margin:50px auto;
}
.flipcard {
  width: 150px;
  height: 200px;
  position: relative;
  box-shadow: 5px 5px 20px #c4c4c4;
  border: 3px solid #b8b8ba;
  border-radius: 5px;
  background: pink;
  transform-style: preserve-3d;
  transition: transform 2s;
}

@keyframes grow {
  from {
    transform: scale(1);
  }
  50% {
    transform: scale(1) rotateY(180deg);
  }
  100% {
    transform: scale(2) rotateY(180deg);
  }
}

.container:hover .flipcard {
  animation: grow 1s forwards;
}

.front-side {
  height: 100%;
  width: 100%;
  position: relative;
  backface-visibility: hidden;
}

.back-side {
  width: 100%;
  height: 100%;
  transform: rotateY(180deg);
  position: absolute;
  top: 0;
  border-radius: 3px;
}

<div class="container">
  <div class='flipcard'>
    <div class='front-side'>
      <img src='https://pre00.deviantart.net/4121/th/pre/i/2018/059/6/7/brigitte_by_raikoart-dc4kzas.png'>
    </div>
    <div class='back-side'>
      <img src="https://img00.deviantart.net/e0ec/i/2017/297/8/c/mercy_by_raikoart-dbrm54b.png">
    </div>
  </div>
</div>

Answer 2

在单个动画中同时使用 scale 和 rotate 变换。

html, body {
  background: #f2edea;
  height: 100%;
  width: 100%;
}

img {
  width: 100%;
  max-height: 100%;
}

.flipcard {
  width: 150px;
  height: 200px;
  margin: auto;
  top: 20%;
  position: relative;
  box-shadow: 5px 5px 20px #c4c4c4;
  border: 3px solid #b8b8ba;
  border-radius: 5px;
  background: pink;
  transform-style: preserve-3d;
  transition: transform 2s;
} 

@keyframes growandflip {
  from {
    transform: scale(1);
  }
  50% {
    transform: rotateY(180deg) scale(1);
  }
  100% {
    transform: rotateY(180deg) scale(2);
  }
}

.flipcard:hover {
  animation: growandflip 2s; 
}

.front-side  {
  height: 100%;
  width: 100%;
  position: relative;
  backface-visibility: hidden;
  
}

.back-side {
  width: 100%;
  height: 100%;
  transform: rotateY(180deg);
  position: absolute;
  top: 0;
  border-radius: 3px;
}

<div class='flipcard'>
  <div class='front-side'>
    <img src='https://pre00.deviantart.net/4121/th/pre/i/2018/059/6/7/brigitte_by_raikoart-dc4kzas.png'>
  </div>
  <div class='back-side'>
    <img src="https://img00.deviantart.net/e0ec/i/2017/297/8/c/mercy_by_raikoart-dbrm54b.png">
  </div>
</div>

Answer 3

@keyframes grow {
  0% {
    transform: scale(0);
  }
  50% {
    transform: scale(0);
  }
  100% {
    transform: scale(2);
  }
}