The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Best Way To Prevent Transitions From Reversing?

  • This topic is empty.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
  • #148304
    Tom Houy

    I am using a Transition effect on a :hover event, but I don’t want the effect to play in reverse when I move my mouse off the element. I just want it to immediately reset to it’s original state. The only way I can seem to accomplish this right now is to add another transition to the original element, and set it to 0 seconds such as in the example code below. Is this the ideal way to accomplish this or am I missing something?

    .mystyle p {
    transition: all 0s;

    .mystyle:hover p {
    transition: all 1s ease-out 0s;

    Tom Houy

    Here is an example of the transition occurring both when I mouse over and off the container:

    Here is an example with the extra transition properties added to try and get rid of the reverse transition:

    As I mentioned, it works, but I wanted to know if this is the best method to accomplish this.


    If you only transition on the hover it does snap back.

    Tom Houy

    Perfect, that’s what I was looking for. Thanks!

    I was building the transitions in Dreamweaver CC, and by default they were adding them to the other class.

Viewing 4 posts - 1 through 4 (of 4 total)
  • The forum ‘CSS’ is closed to new topics and replies.