CODEWITHSUNDEEP
cssgoogle-chromewebkitcss-transitions
aniskhan001
aniskhan001

Reputation: 8521

Why is the duration of transition always fixed with webkit browsers?

I've been playing around with CSS transition and made this JSFiddle

The transition property is currently supported by all the major browsers and doesn't require vendor prefixes either (however I have included them in my fiddle). I have also searched on W3C site for some known issue with transition-duration and didn't find any.

HTML

<div class="foo"></div>

CSS

.foo {
    background: #4FC093;
    display: block;
    width: 600px;
    height: 600px;
    box-shadow: 0 0 300px inset;
    margin: 0 auto;
    border-radius: 50%;
    cursor: pointer;
    transition: all 10s ease;
}

.foo:hover {
    width: 100px;
    height: 100px;
    box-shadow: 0 0 50px inset; 
}

The problem with Google Chrome / webkit browsers

If I remove the cursor earlier before the transition ends, it goes back to it's initial state by taking (10s) the duration defined in the transition property.

For example :
I removed the cursor after transition played for 1s it goes back to it's initial state by taking 10s.

In Firefox and IE10+, the duration of changing back to it's initial state is the same duration of actual transition playing time.

To see it in action hover over to the .foo div and remove the cursor quickly when the transition starts.
[ P.S: The duration of 10s might be boring but I have made this to observe the issue clearly. ]

Upvotes: 5

Views: 446

Answers (2)

DavidT
DavidT

Reputation: 2481

I haven't experienced this before, but I think I can see what is happening.

If I understand your problem correctly this is because when you hover initially, and remove before the transition is complete, chrome sees it as having to transition a small change in the same period of time so it appears slower.

For example, if you hover over your 600px diameter circle for 1 second and the diameter reaches 500px (just making that up) then when you stop hovering it only has to expand back by 100px over 10s not the full 500px it was calculating on the initial hover. Therefore the speed is decreased.

A sure fire way of doing this is by doing it with Javascript instead of CSS. That way you can calculate its current size on mouse leave and therefore keep the speed of transition constant.

Upvotes: 1

Cameron
Cameron

Reputation: 1524

You could add a second transition to make the "revert" animation faster for all (if that works for what you want).

See the updated fiddle here and partial CSS below:

.foo {
    /* default properties */
    transition: all 1s ease;/* this transition will apply when user exits hover state */
}

.foo:hover {
    /* properties for hover */
    transition: all 10s ease;/* this transition will apply when user hovers */
}

Upvotes: 2

Related Questions