Stack CSS Transitions Using Multiple Classes Without Overriding

Stack CSS Transitions using multiple classes without overriding

JavaScript could be a cleaner solution as you only need to have 1 CSS rule (the original rule).

If you know the position of you're rule you can do the following.

//First Save The Original Rule

var originalRule = document.styleSheets[0].cssRules[3].cssText;

//Save also the original Hover Rule

var originalHover = document.styleSheets[0].cssRules[4].cssText;

Now originalRule will contain this:

.container{
   ...
   transition: margin .2s;
   ...
}

And originalHover will contain this:

.container:hover{
   ...
   margin: 10px 0;
   ...
}

to simply add another transition effect, you can do the following.

document.styleSheets[0].cssRules[3].style.transitionProperty += ",background-color";
document.styleSheets[0].cssRules[4].style.transitionDuration += ",1s";

At this stage, both transitions will take effect.

If you want to only have the original transition, you can either add it manually or simply...

//Delete the Rule

document.styleSheets[0].deleteRule(3);

//Add the Original Rule Back Again

document.styleSheets[0].insertRule(originalRule,3);

If you do so, only the original transition (margin) will take effect, don't forget to also replace the originalHover rule to remove any other effects on hover.

Note:

For Chrome

document.styleSheets[0].cssRules[3].style.webkitTransitionProperty

For Firefox

document.styleSheets[0].cssRules[3].style.mozTransitionProperty

For IE
insertRule and deleteRule do not work, there's these ones instead:

addRule , removeRule

LIVE DEMO FOR CHROME AND FIREFOX

Combine multiple classes with multiple animations

Although I'm not 100% satisfied, this does do the job.

I'm now using a small bit of jQuery.

jQuery( document ).ready( function( $ ) {

    $( '.btn' ).css( 'animation-name', function( index, value) {
        return $( this ).attr('class').replace( / /g, ',' );
    });
    $( '.btn' ).css( '-webkit-animation-name', function( index, value) {
        return $( this ).attr('class').replace( / /g, ',' );
    });

});`

How to have multiple CSS transitions on an element?

Transition properties are comma delimited in all browsers that support transitions:

.nav a {
  transition: color .2s, text-shadow .2s;
}

ease is the default timing function, so you don't have to specify it. If you really want linear, you will need to specify it:

transition: color .2s linear, text-shadow .2s linear;

This starts to get repetitive, so if you're going to be using the same times and timing functions across multiple properties it's best to go ahead and use the various transition-* properties instead of the shorthand:

transition-property: color, text-shadow;
transition-duration: .2s;
transition-timing-function: linear;

How to overwrite css using different classes without !important

You can add more specificity to your CSS, to very precisely target that type of element as well as increase the power of that selector. Like input[type="button"].thirdButton{...} see demo below:

input[type="button"],input[type="button"]:active,input[type="button"]:hover {  width: 172px;  height: 37px;  line-height: 2 !important;  margin: 11px 0px 0px 0px;  padding: 5px 150px 9px 5px;  line-height: 19px;  font-size: 12px;}
/* this is the selector line to change */input[type="button"].thirdButton, input[type="button"].thirdButton:hover,     input[type="button"].thirdButton:active {  width: 50px;  padding: 0;  background-position-x: 50%;}

<input type="button" name="generic" value="generic" /><br/><input type="button" name="third" value="third" class="thirdButton" />

How to add two CSS classes with transition property to one HTML element?

If you set a CSS property twice, then one value will override the other. It will never be treated in an additive way.

You need to apply all the pieces of the value at once.

You can either do that all the time:

button {
    transition: color .1s, border .1s
}

or only when the classes are combined:

.anim-color.anim-border {
    transition: color .1s, border .1s
}

---

Related Topics