Add transition property by class to existing transition properties

Question

is it possible in CSS3 to let a class just add new transition properties to an existing transition instead of replacing the old transition definition?

For example:

.transition-a {
transition: opacity 0.3s ease-in;
}

.transition-b {
transition: color 0.3s ease-in !important;
}

<div class="transition-a transition-b">
</div>

would overwrite transition-a instead of adding an additional property to the exisitng transition definition.

It would be nice if it would be possible to compose different classes like mixins resulting in a property like

transition: color 0.3s ease-in, opacity 0.3 ease-in`

without the need to explicitly specify a rule for the combination of both classes that would force you to repeat yourself.

EDIT: More Details

I currently use the SASS source of Bootstrap and want to apply an additional transition on Bootstraps .badge class. I have an additional class .fade containing the following:

.custom-badge.fade {
transition: opacity 0.3s ease-in !important;

It would work fine if it wouldn't overwrite the definitions of Bootstraps .badge class transition property. I simply want to add an additional transition property to the exiting color transitions.

why not using `transition: all 0.3s ease-in !important;` ? it will add more than what you need but will cover your case — Temani Afif, Aug 21 '20 at 19:21
It overwrites the previous durations and interpolation specifications. — Sebi2020, Aug 22 '20 at 15:56

alula · Answer 1 · 2020-08-22T16:14:34.417

0

It's not possible.

But, my workaround in these situation is to break up the short syntax and rewrite just the property that needs to change, so you can preserve the rest.

In this case:

.transition-a {
  transition-property: opacity;
  transition-duration: .3s;
  transition-timing-function: ease-in;
}

.transition-b {
  transition-property: opacity, color;
}

NB: you can omit !important if .transition-b is declared after .transition-a NB2: this works great with background images.

edited Aug 22 '20 at 16:14

answered Aug 21 '20 at 15:45

alula

101
4

But i don't want to exchange the property. I want to add another property. – Sebi2020 Aug 21 '20 at 15:50
My bad, updating the example putting .transition-b { transition-property: opacity, color; } – alula Aug 22 '20 at 16:13

score 0 · Answer 2 · answered Feb 09 '23 at 18:38

If the transitions have the same duration, delay, and easing, you can always fall back on using transition-property: all:

.transition-a {
  transition: opacity 0.3s ease-in;
}

.transition-b {
  transition-property: all;
}

Ostensibly there's a performance hit for using all (see this answer, for instance), but it's not something I've ever noticed.

Add transition property by class to existing transition properties

2 Answers2