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

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);
}
}