1

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;
}

3 Answers 3

7

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 */
}

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 */
}
0
1

Add the transition before the :hover, so the transition always applies

.shape1 { transition: 0.2s ease; }

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

0

When you add also transition to your shape1 class it should works

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.