Webkit transition working in only one direction

[adh32]

Sorry for the slightly cryptic title, but I couldn't think of a better way to describe this in a few words.

I'm using -webkit-transition to animate a scale on thumbnails, like so:

.thumbnail:hover { -moz-transform: scale(1.1); -webkit-transform: scale(1.1); transform: scale(1.1); 
-webkit-transition: all 0.15s ease-in; }

But it only animates on hover: when the pointer is moved away, the element snaps back to its original size without any animation. All of the demos that I've seen show the transition working in both directions.

I tried changing the options, such as swapping from ease-in to ease-in-out, but that made no difference (which is probably obvious). Transitions are new to me and I'm stumped by this.

[Rayzur]

I tried changing the options, such as swapping from ease-in to ease-in-out, but that made no difference (which is probably obvious). Transitions are new to me and I'm stumped by this.

Hi,
I think you would be able to see the difference in the options if you slow down your timing. As it is right now you have it set at .15s which is pretty fast, it's just slightly more than "0" which would be very close to a standard :hover behavior.

Here is a good article I ran across the other day that gives a live example of all the different "ease" functions beside each other.

Using CSS3 Transitions, Transforms and Animation

Open up Chrome and view that link, then you should should see that there is indeed a difference in them. When the timing is set the same they all reach their destination at the same time but the behavior of them is different between the start and finish points.

For the sake of testing, slow down your timing to something like .75s and then you should see a difference in them.

[adh32]

I already had it set slower during initial testing a few days ago, prior to settling on the best time for the effect. Even then, this problem existed, although I thought nothing of it because I just figured that it was correct behaviour. It was checking demos like the one that you mentioned that showed otherwise.

[Rayzur]

But it only animates on hover: when the pointer is moved away, the element snaps back to its original size without any animation.

It was checking demos like the one that you mentioned that showed otherwise.

You need to be setting your transitions on the default state of that element, not the hover state. That is how you will get your smooth transitions.

Then what you want it to change to gets set on the :hover state.

Take this demo for example:
CSS3 Transitions: Roll-Out Anchor with Fade-In BG Color

I am setting my transitions on the default state of the anchor, then when my cursor is not on :hover it transitions back to those default properties smoothly with the timing function and ease value.

/*=== CSS3 Transition Enhancements ===*/
#nav a  {
    width:70px;/* show BG image icon only*/
    background-color:#CCC;
    -webkit-transition: all .5s ease-in-out;
    -moz-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
}
#nav a:hover {
    width:234px;/* show full BG image on hover*/
    background-color:#800080;/* transition to "Purple" on hover*/
}

[adh32]

Ah, thank you. That has solved it.

It's a pity that the tutorials that I studied didn't bother to mention that important fact. It wouldn't have occurred to me as entirely logical to put it anywhere but in the hover part of the CSS.

[Rayzur]

It's a pity that the tutorials that I studied didn't bother to mention that important fact.

Glad you got it sorted out

Using :hover is generally going to be the CSS way to fire off the Transition Events that are set on an element. Though it could be done with other pseudo states such as :active, :focus, or even :target. Whether or not they would be suitable triggers would depend on the situation I suppose.

In the article that I linked to previously the author uses javascript quite a bit to bind events to the clickable controls. So with that being said there are several ways other than just using :hover to fire off the transitions.

Looks like I need to brush up on my terminology a little bit too.
I had said this -

... then when my cursor is not on :hover it transitions back to those default properties smoothly with the timing function and ease value.

Actually the timing-function is the property for the "ease" keyword values. You can also set your own number values (other than keywords) by using cubic-bezier.

When I had mentioned timing function there I had intended to say transition-duration which is where you set your speed. I was playing around with transitions about six months ago but just recently got involved with them again. It's all coming back to me now but I need to get caught up on it.