Transition issue

[JayNicks]

I have a simple button (not a themeable one) on my page and I wanted have the background color of it change when the mouse hovers over it.

So...I read up about transitions in the help section and I even went to the sample page where it shows a couple examples and settings. I set my button up according the settings shown in the example.

The settings they show for this is:
Trigger - Hover
Duration - 500
Delay - 0
Timing - Linear
Property - Background
Value - I changed this to a lighter color.

In the examples on the Transitions help page, when you hover the pointer over each example object, the animations ease into the changed state, and when the mouse moves off of the object, it eases out of the changed state. In the button example, the color fades in on hover and then fades out after the mouse is moved elsewhere.

When I try these settings on my button and I hover the pointer over it, it fades into the changed color state with a nice ease, however when I move my mouse pointer off the button it just snaps back its original color...no nice fade out to original color.

Same thing happens on text when I tried the scale animation transition.

I've tried every setting there...no luck. I've read the help...I have searched this forum high and low and finally I came here and made this post.

What am I doing wrong?

[wwonderfull]

It is something simple to do. Please provide a demo of your project by providing a link to your page.

[Pablo]

Did you also set the transition duration of the default state in the transitions?

[JayNicks]

Thanks for your reply Pablo,

I did figure this out after examining the settings one of the templates that used the same sort of animation.

The thing is, on the "Introduction to transitions" tutorial page it mentions nothing about first setting a Trigger: (default) as the first transition.

Maybe have an example of the Button/Animations section on the transition page showing both the default and the hover entries as well?

[Pablo]

By default, an HTML element does not have duration. Note that this is not specific to the software.
So, the 'default' state specifies the transition values from hover to default state.

[JayNicks]

I get what you're saying Pablo. I'm just saying it might be a good idea (for semi noobs like me who don't know that level of techical knowledge ) to show the example of those two entries in the transiton section of the animation settings.

Trigger Delay Duration Property
(default) 0 500 background-color
hover 0 500 background-color

Anyways...problem solved.