悬停过渡CSS [英] Hover off transition css

问题描述

这个问题可能很明显，但是我是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 */
}

这篇关于悬停过渡CSS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！