CSS不同的悬停动画(CSS禅宗花园的例子)

Question

刚刚在http://csszengarden.com/219/上看到了这个css动画，并想重新创建动画，当你将鼠标悬停在中间的卡片上时开始，即

网站通常会提供一个CSS样式表，但是在这个例子中我找不到。

悬停动画部分只是一个动画，首先平移y轴，然后改变视角。

我的问题是，我真的不知道这个动画的悬停部分是如何工作的，因为首先，卡片必须保持悬停动画的结束状态，然后它首先在y轴上平移，然后它缩小，所以它不是悬停的反向动画。

用from和to尝试了关键帧的方法。这种方法可以用悬停的正确结束状态启动unhoveranimation，但它只能处理单个动画，而不能处理连续的动画。此外，使用from和to，当你在动画结束前悬停时，动画只是跳跃。

这是我目前得到的。

.parent {
height: 1000px;
width: 1000px;
position: relative;
}
.child {
height: 40px;
width: 40px;
left: 40%;
border: medium solid black;
position: absolute;
}
.parent:hover .child{
animation: 3s in forwards;
}
@keyframes in {
50% {
transform: translate3d(0px, 100px, 0px);
}
100% {
transform: perspective(500px) translate3d(0px, 100px, 100px);
}
}

<div class="parent">
<div class="child"></div>
</div>

Answer 1

在:hover上更改多个样式属性。transition属性可以像transition: property duration timing delay一样具有延迟值。在你的例子中，有些属性有延迟，有些没有，所以看起来有多个转换发生。下面是更改div的left和top的示例。left属性延迟1秒，top属性没有延迟

.banner {
transition: top 1s linear, left 1s linear 1s;
/*when hovered, move 100 down, after 1s move 100 right*/
position: absolute;
top: 0;
left: 0;
width: 200px;
height: 150px;
background-color: coral;
}
.banner:hover {
top: 100px;
left: 100px;
}

/*this is needed so you don't get flickering*/
.banner::before {
content: '';
height: 100px;
width: 100%;
position: absolute;
top: -100px;
left: 0;
}

<div class="banner">Hello Stackoverflow!</div>