悬停过渡 css

2022-01-22 00:00:00 animation hover css transition

这个问题可能很明显，但我是 CSS 新手.

this question might be obvious but i'm new in css.

我正在为一个形状设置动画，因此当您将其悬停时，它会拉伸.我已经通过一个很好的轻松过渡完成了悬停，但是当你离开鼠标时，过渡不起作用.有没有办法让它在悬停时刻也发生?

I'm animating a shape so when you hover it, it stretches. I've completed the hover on with a nice ease transition but when you move off the mouse the transition doesn't work. Is there a way to make it happen also in the hover off moment?

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

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

推荐答案

你的答案

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

Your answer

You have added the transition property on the hover state of the element. Therefore the transition is not applied when you leave the cursor from the element.

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

更多信息

除此之外，您还可以向 transition 添加特定属性.例如，如果您只想对高度进行动画处理，您可以这样:

Further information

Besides this you can also add specific properties to the transition. For example, if you only want the height to be animated you could it like this:

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

您甚至可以为每个属性定义不同的转换时间:

You can even define different transition-times for each property:

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

相关文章