CSS不同的unhover动画（CSS Zen Garden示例）

刚刚看到这个只有CSS的动画，并想重新创建动画，当你悬停在中间的卡，即开始

通常，该站点提供CSS样式表，但在这个示例中，我找不到任何样式表

悬停动画部分只是一个动画，它首先平移y轴，然后更改透视

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

它使用

from

和

to

尝试关键帧的方法。这种方法可以从悬停的右端状态开始解除动画，但它只能处理单个动画，而不能处理连续的动画。此外，使用

from

和

to

时，如果在动画结束前取消连接，动画就会跳转

这是我目前掌握的情况。

.parent{
高度：1000px；
宽度：1000px；
位置：相对位置；
}
.孩子{
高度：40px；
宽度：40px；
左：40%；
边框：中等纯黑；
位置：绝对位置；
}
.parent:悬停.child{
动画：向前3秒；
}
@中的关键帧{
50% {
转换：translate3d（0px，100px，0px）；
}
100% {
转换：透视（500px）转换3d（0px，100px，100px）；
}
}

---

On

：悬停

多个样式属性已更改。

transition

属性可以具有类似于

transition:property duration timing delay

的延迟值。在您的示例中，有些属性有延迟，而有些属性没有，因此看起来好像发生了多个转换。下面是更改

div

的

left

和

top

的示例。

left

属性有1秒的延迟，

top

没有延迟

.banner{
过渡：顶部1s线性，左侧1s线性1s；
/*悬停时，向下移动100，1s后向右移动100*/
位置：绝对位置；
排名：0；
左：0；
宽度：200px；
高度：150像素；
背景颜色：珊瑚；
}
.横幅：悬停{
顶部：100px；
左：100px；
}
/*这是必要的，这样你就不会闪烁*/
.banner：：之前{
内容：''；
高度：100px；
宽度：100%；
位置：绝对位置；
顶部：-100px；
左：0；
}

---

你好

如果您访问给定的网站，请确保您的分辨率足够大（或者只需向外滚动）！否则可能会令人困惑。@Bouvanni我看过你的文章，也尝试过这种方法，但它只适用于没有几个动画步骤的单个动画，不是吗？在我查看了页面的CSS后，看起来他们只是在使用延迟进行一些转换。例如，移动的vie

右侧

立即发生1s长。

transform

属性的延迟为1s，因此它在横幅向下移动后开始。