Combine multiple classes with multiple animations

Question

The situation I would like to create is as following: - Have a css file with several (lets say 10) animations ready like fadein, fadeout, roll-left, roll-right etc. - Create an div element with class=’fadein roll-left’ I want this element to fadein and roll-left.

I want this to be accomplished without creating a .fadein.roll-left class because when I’ve got 10 animations I need to make (something like?) 10^10 classes to be able to get all the variations?

Here is a codepen for better explanation: http://codepen.io/Sormano/pen/Bbphs

In short my question is: is there any way to ‘merge’ multiple animation-name: …; instead of overwriting the other.

Hope my question is clear, thanks.

Answer 1

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, ',' );
    });

});`