Also, if a transition is only specified for the always-present style, then it would apply in both directions assuming no interruption, right? This is, given:

a[href] {transition: 2s all;}
a[href]:hover {transform: rotate(180deg);}

…it would take two seconds to rotate on hover and the same two seconds to rotate back on un-hover, because the same transition would apply to both states. If I specified a different transition on the hover state, it would apply when un-hovering, not hovering. (And if the rotation on hover is interrupted, it should unspool in T-TE time, not take the full two seconds.) Right?

Obviously I need to add cases to test transitions in both directions and on only un-hover to see how much consistency exists. Plus at least two more that test reversal time for interrupted animations.

Fun fun fun!

This means that the snap-back behavior is correct. It also means that, if you want, you can use different timing functions for the “forwards” and “backwards” directions, but putting the timing function for the “forwards” direction on the :hover style and the “backwards” one on the style that’s always present.

Of course, I’ve since found that both Opera and Webkit apparently ignore point 2 in that section (“Execute with the same duration T, but starting as if the transition had already begun…”) and run the reversal in T time, not T-TE time. Thus, if you start a 60 second rotation and abort it 10 seconds in, they take 60 seconds to rotate back to the starting point, not 10. Gecko does not suffer this failing.

So yeah, CSS transitions. Kind of a mess.


a[href]:hover {transform: rotate(90deg); color: red; transition: 1s all;}
a[href]:focus {transform: skewX(-10deg); color: yellow; outline: 1px dotted green; transition: 2s all;}


…reads to me as “On hover, do a 90-degree transform, color the link red, and take one second to do both. On focus, skew minus 10 degrees, color the link yellow, bring in a dotted green outline, and take two seconds to do all three.”

Forcing the transition onto the default state means that all transitions are the same length. Allowing it on states, as Webkit and Gecko do, means you can vary lengths depending on the state. (Not to mention all the other transition-related properties.)

Unless the specification says somewhere that transitions are ignored in such cases, Opera seems to be in the wrong. And if the specification does say that, I’d argue that it’s flawed and should be fixed.

I do recommend that you have one set of transitions of hover and another see of transitions on hover out since hovering out will also cause a snap.

Another interesting test-case could be to create another parent div surrounding the first with some padding (so it’s actually a larger surface). Then put the transform on the outer div:hover and the transition on the inner div:hover (both still applying to the span ultimately). As you mouseover you have to pass over the outer div before the inner div. I predict this will cause the transition to never be applied and it will snap into place both ways.

An interesting Venn Diagram intersection could also be created that allowed every possibility of animate/don’t animate on mousein/mouseout depending on the path the user’s mouse takes across it.

When the transition is attached to the span it’s like saying ‘change your properties to whatever the effective values are in a 1sec timeframe’.
So, because in the second case that transition property is always attached, the property changes are affected by the transition in both direction (hover on/off). But in the first case that transition is only attached when the div is :hover’d, so when the element isn’t hovered the transition is removed, and the other properties change instantly (no transition to follow).

Off the top of my head it sounds like useful behavior as you can have different transitions for transitioning in/out of a state. Combining the examples:

div span {
transition: 3s transform; /* transition on blur slowly */
}
div:hover span {
transition: 1s transform; /* transition on :hover fast */
transform: rotate(270deg);
}