How can I create a smooth animation with CSS3 that transitions back smoothly when the element is no longer being hovered over, instead of just snapping back abruptly?

Question

How can I create a smooth animation with CSS3 that transitions back smoothly when the element is no longer being hovered over, instead of just snapping back abruptly?

http://jsfiddle.net/nicktheandroid/vX7CV/10/

This is a straightforward example, however for my specific requirements, I need to utilize animation instead of transition.

During hovering over the element, the animation smoothly transforms the element; but when moving away from it, it abruptly reverts back to its original state without any smooth transition.

Is there a method to make it smoothly animate back to its original settings rather than snapping back as it currently does?

I must use animation for the hover event, but I am open to using transition when hovering off the element if it can achieve the desired effect. However, I have not been able to make this work so far.

css css-animations

Answer 1

Answer №1

After thorough testing, I can confirm that your version works smoothly on Google Chrome and Firefox as well.

Here is the updated code:

HTML:

<ul>
    </li>test</li>
</ul>

CSS:

ul {
    background-color:black;
    color:white;
    width: 100px;
    height:100px;
}
@-moz-keyframes flow-down {   
    0% {
      padding-bottom: 0%;
    }
    100% {
      padding-bottom: 30%;
    }
}
@-webkit-keyframes flow-down {   
    0% {
      padding-bottom: 0%;
    }
    100% {
      padding-bottom: 30%;
    }
}
ul:hover {
    -moz-animation-name: flow-down;
    -moz-animation-duration: 0.5s;
    -moz-animation-timing-function: ease-in-out;
    -moz-animation-fill-mode:forwards;
    -webkit-animation-name: flow-down;
    -webkit-animation-duration: 0.5s;
    -webkit-animation-timing-function: ease-in-out;
    -webkit-animation-fill-mode:forwards;
}

View the JSFiddle version for reference:

http://jsfiddle.net/NQ5xk/1/

I hope this information proves useful to you.

Best regards

Answer 2

After thorough testing, I can confirm that your version works smoothly on Google Chrome and Firefox as well.

Here is the updated code:

HTML:

<ul>
    </li>test</li>
</ul>

CSS:

ul {
    background-color:black;
    color:white;
    width: 100px;
    height:100px;
}
@-moz-keyframes flow-down {   
    0% {
      padding-bottom: 0%;
    }
    100% {
      padding-bottom: 30%;
    }
}
@-webkit-keyframes flow-down {   
    0% {
      padding-bottom: 0%;
    }
    100% {
      padding-bottom: 30%;
    }
}
ul:hover {
    -moz-animation-name: flow-down;
    -moz-animation-duration: 0.5s;
    -moz-animation-timing-function: ease-in-out;
    -moz-animation-fill-mode:forwards;
    -webkit-animation-name: flow-down;
    -webkit-animation-duration: 0.5s;
    -webkit-animation-timing-function: ease-in-out;
    -webkit-animation-fill-mode:forwards;
}

View the JSFiddle version for reference:

http://jsfiddle.net/NQ5xk/1/

I hope this information proves useful to you.

Best regards

Answer 3

Answer №2

If you modify the 'position' or 'z-index' attributes in Firefox while an animation is running, the animation will not be able to continue smoothly.

Answer 4

If you modify the 'position' or 'z-index' attributes in Firefox while an animation is running, the animation will not be able to continue smoothly.

How can I create a smooth animation with CSS3 that transitions back smoothly when the element is no longer being hovered over, instead of just snapping back abruptly?

Answer №1

Answer №2

Similar questions

Tips for effectively utilizing the :valid pseudo-class in Material-UI components to dynamically alter the border styling

Eliminating the default inline style automatically

Laravel - Automatically assign a class to a nav-link when its generated URL corresponds to the current route

Set a CSS rule to style every other row in a table, starting from the second row and resetting after

How to insert an image into a div element in HTML5

What techniques does Google use to craft mobile-friendly fixed backgrounds and parallax content within iframes?

How can I implement a daily-updating timestamp on a website using bootstrap and javascript, particularly for review and blog posts?

Difficulties arise when dealing with card elements and scrolling on a

Create a custom CSS style to replace the default jQuery hide() function

Fresh sheet with a view through the window

JavaScript CompleteLink message

The application of border-radius to a solitary side border forms a unique "crescent moon" shape rather than a traditional semi-circle

Achieve consistent card body heights in Bootstrap 4 with the card group feature

persistent image in HTML affecting the layout of the header

What is the best way to add borders to my website design?

Press anywhere outside the container to conceal it along with the button

Employing jQuery to implement a hover animation on IE9, it functions properly when hovering over but exhibits strange behavior upon exiting

Replacing a predefined label in Volusion (for language translations)

Visual element and form entry

What causes certain div content to be absent from ZoneTemplate within an ASP.NET web part?