How to combine multiple "transition" rules?
css, css-transitions
Solution
The transitions are declared on the same elements so even if you use different classes to declare them, the transition property is overriden by the second transition declaration.
You can transition several properties like height and opacity if you declare them in one declaration seperated by a comma using this syntax (check w3.org for reference) :
transition: opacity 1s, height 2s;
Your code should look like this :
.active_only {
opacity:0;
transition:opacity 1s, height 2s;
}
.activator:hover .active_only {
opacity:1;
}
.elastic {
height:20px;
}
.elastic:hover {
height:40px;
}
li {
border:1px solid red;
}
<div class="activator">Here's a magic list
<ul>
<li class="elastic active_only">item one</li>
<li class="elastic active_only">item two</li>
</ul>
</div>
Problem
I'd like to have CSS lightweight classes which mean one thing each. So I wanted to have one class which said that an item is getting higher when mouse is over it, and the other which said that item should become invisible if parent is not active. The problem is that each of this aspects should be animated, so I defined `transition: height 1s` in first class and `transition: opacity 2s` in the other. Here is a simplified version of my attempt, this seems to do something entirely different than I expected: rules do not merge, but merely override each other. ``` .active_only { opacity: 0; transition: opacity 1s; } .activator:hover .active_only { opacity: 1; } .elastic { height: 20px; transition: height 2s; } .elastic:hover { height: 40px; } li { border: 1px solid red; } ``` ``` <div class="activator"> Here's a magic list <ul> <li class="elastic active_only">item one <li class="elastic active_only">item two </ul> </div> ``` How can I apply several transition rules on the same element ?