How to combine multiple "transition" rules?

Question

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 ?

user transition: all 1s

Justinas
– Justinas

2014-07-11 08:56:33 +00:00
Commented Jul 11, 2014 at 8:56 — Justinas
– Justinas, Commented Jul 11, 2014 at 8:56
have you found a solution meanwhile?

Knut
– Knut

2019-06-30 10:47:20 +00:00
Commented Jun 30, 2019 at 10:47 — Knut
– Knut, Commented Jun 30, 2019 at 10:47

web-tiki · Accepted Answer · 2022-01-21 12:56:22Z

12

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>

edited Jan 21, 2022 at 12:56

answered Jul 11, 2014 at 9:00

web-tiki

104k33 gold badges226 silver badges258 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Harry · Accepted Answer · 2015-02-02 12:48:30Z

You can do it either using all for making all properties that are changing to have transition or by using comma separated values if you want only selected (but multiple) properties to have transition.

.active_only {
    opacity: 0;
    -webkit-transition: height 1s, opacity 1s;
    -moz-transition: height 1s, opacity 1s;
    transition: height 1s, opacity 1s;
}

or

.active_only {
    opacity: 0;
    -webkit-transition: all 1s;
    -moz-transition: all 1s;
    transition: all 1s;
}

.active_only {
  opacity: 0;
  -webkit-transition: height 1s, opacity 1s;
  -moz-transition: height 1s, opacity 1s;
  transition: height 1s, opacity 1s;
}
.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>

Using CSS Transitions - MDN Guide

Collectives™ on Stack Overflow

How to combine multiple "transition" rules?

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related