Question

我想创建的情况如下： - 有一个css文件，其中包含几个（比方说10个）动画，如fadein，fadeout，roll-left，roll-right等。 - 使用class ='fadein roll-left'创建一个div元素我希望这个元素能够淡化并向左滚动。

我希望这可以在不创建.fadein.roll-left类的情况下完成，因为当我有10个动画时我需要制作（类似于？）10 ^ 10个类才能获得所有变化？< / p>

这是一个用于更好解释的codepen：http://codepen.io/Sormano/pen/Bbphs

简而言之，我的问题是：有没有办法'合并'多个动画名称：...;而不是覆盖另一个。

希望我的问题很清楚，谢谢。

Answer 1

虽然我不是100％满意，但这确实可以胜任。

我现在正在使用一小部分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, ',' );
    });

});`

将多个类与多个动画组合在一起

1 个答案: