CODEWITHSUNDEEP
jqueryhtmlcss
Blooded
Blooded

Reputation: 25

Multiple transitions

Yesterday I got my problem solved about jquery, which didn't load correctly. Today I struggle with yet another problem: two transitions for one element. The first transition starts when the page has loaded: it fades in. This one actually works when I do not use my second transitions. My second transitions must start whenever someone hovers over the ul. The problem is that the hover transitions 'overwrites' the fade-in transition. My jsFiddle: http://jsfiddle.net/2cpX6/6/

Thanks in advance.

Upvotes: 0

Views: 565

Answers (2)

Explosion Pills
Explosion Pills

Reputation: 191789

You can't put the same CSS rule for the same ruleset without it being overwritten. This applies to everything. For example, if you had:

span {
    color: red;
    color: green;
}

The spans would be green. This means that you cannot stack transition rules for the same ruleset.

You can create multiple separate transition rules using a comma.

transition: opacity 2s ease-in, color .3s ease-in-out;

http://jsfiddle.net/ExplosionPIlls/2cpX6/7/

Upvotes: 2

Niet the Dark Absol
Niet the Dark Absol

Reputation: 324780

CSS rules with the same name override each other, just like any other rule.

Try this:

transition: opacity 2s ease-in, color 0.3s ease-in-out;

Note that you only need transition and -webkit-transition, since Firefox and Opera now fully support the unprefixed version, and -ms-transition never existed.

Upvotes: 3

Related Questions