悬停过渡 css

Question

这个问题可能很明显，但我是 css 的新手。

我正在制作一个形状的动画，所以当您悬停它时，它会伸展。我已经通过一个很好的轻松过渡完成了悬停，但是当你离开鼠标时，过渡不起作用。有没有办法让它在悬停时也发生？

.shape1{
position: absolute;
background:red
top:512px;
width:180px;
height:140px;
}

.shape1:hover {
height: 160px;
top:492px;
transition: 0.2s ease;
}

Answer 1

在 :hover 之前添加过渡，因此过渡始终适用

.shape1 { transition: 0.2s ease; }

The :hover selector is used to select elements when you mouse over them. W3Schools

Answer 2

当您还向 shape1 添加过渡时 class 它应该有效

Answer 3

你的答案

您已在元素的悬停状态上添加了 transition 属性。因此，当您从元素中保留 cursor 时，不会应用 transition。

.shape1{
    position: absolute;
    background: red;
    top: 512px;
    width: 180px;
    height: 140px;
    transition: .2s ease; /* move this here from :hover */
}

更多信息

除此之外，您还可以向 transition 添加特定属性。例如，如果你只想要高度动画，你可以这样：

.shape1 {
    transition: height .2s ease;
    /* this inly affects height, nothing else */
}

您甚至可以为每个属性:

定义不同的过渡时间

.shape1 {
    transition: height .2s ease, background-color .5s linear;
    /* stacking transitions is easy */
}

悬停过渡 css

Hover off transition css

css

animation

transition

hover

你的答案

更多信息