How can I classify each comma-separated value of CSS styles so that they can be accumulated?

user_4510033 0
Viewed 61

For example,

I want to make elements like:

<div style="
    transition: opacity 250ms linear, background-color 250ms linear;
    "></div>

<span style="
    transition: opacity 250ms linear, color 250ms linear;
    "></span>

, and classify the styles to make them(CSS classes) easy to reuse:

.smooth-opacity-change {transition: opacity 250ms linear;}
.smooth-color-change {transition: color 250ms linear;}
.smooth-background-color-change {transition: background-color 250ms linear;}

; then I could write it:

<div class="smooth-opacity-change smooth-background-image-change"></div>

<span class="smooth-opacity-change smooth-color-change"></span>

But they're exclusive; transition style can have multiple values, however only one transition style can be applied.

How can I solve this problem, or is it discouraged by design?

css
1 Answers
Related