Question

我正在尝试将CSS3动画应用于包含在跨度中的文本。

当元素具有动画类和动画名称的类时，它会起作用。

我正在使用jQuery添加这些类，因为此动画在点击时发生，并且将在click（）函数内。我在添加它之前也删除了这些类，因为这些类只能存在一次才能使动画生效。

之前我已经多次这样做了，但是由于某种原因，当我在跨越文本时尝试它时，它无法正常工作。

jQuery似乎在开发人员工具中起作用我看到添加的类和在点击时删除，但动画没有发生。

这是我的jQuery代码：

$(document).ready(function(){
    $('.I').click(function(){
            $(this).removeClass('animated').removeClass('wiggle').addClass('animated').addClass('wiggle');
    });
});

这是动画的CSS：

.animated{-webkit-animation-fill-mode:both;-moz-animation-fill-mode:both;-ms-animation-fill-mode:both;-o-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:1s;-moz-animation-duration:1s;-ms-animation-duration:1s;-o-animation-duration:1s;animation-duration:1s;}.animated.hinge{-webkit-animation-duration:2s;-moz-animation-duration:2s;-ms-animation-duration:2s;-o-animation-duration:2s;animation-duration:2s;}@-webkit-keyframes wiggle {
0% { -webkit-transform: skewX(9deg); }
10% { -webkit-transform: skewX(-8deg); }
20% { -webkit-transform: skewX(7deg); }
30% { -webkit-transform: skewX(-6deg); }
40% { -webkit-transform: skewX(5deg); }
50% { -webkit-transform: skewX(-4deg); }
60% { -webkit-transform: skewX(3deg); }
70% { -webkit-transform: skewX(-2deg); }
80% { -webkit-transform: skewX(1deg); }
90% { -webkit-transform: skewX(0deg); }
100% { -webkit-transform: skewX(0deg); }
}

@-moz-keyframes wiggle {
    0% { -moz-transform: skewX(9deg); }
    10% { -moz-transform: skewX(-8deg); }
    20% { -moz-transform: skewX(7deg); }
    30% { -moz-transform: skewX(-6deg); }
    40% { -moz-transform: skewX(5deg); }
    50% { -moz-transform: skewX(-4deg); }
    60% { -moz-transform: skewX(3deg); }
    70% { -moz-transform: skewX(-2deg); }
    80% { -moz-transform: skewX(1deg); }
    90% { -moz-transform: skewX(0deg); }
100% { -moz-transform: skewX(0deg); }
}

@-o-keyframes wiggle {
    0% { -o-transform: skewX(9deg); }
    10% { -o-transform: skewX(-8deg); }
    20% { -o-transform: skewX(7deg); }
    30% { -o-transform: skewX(-6deg); }
    40% { -o-transform: skewX(5deg); }
    50% { -o-transform: skewX(-4deg); }
    60% { -o-transform: skewX(3deg); }
    70% { -o-transform: skewX(-2deg); }
    80% { -o-transform: skewX(1deg); }
    90% { -o-transform: skewX(0deg); }
100% { -o-transform: skewX(0deg); }
}

@keyframes wiggle {
    0% { transform: skewX(9deg); }
    10% { transform: skewX(-8deg); }
    20% { transform: skewX(7deg); }
    30% { transform: skewX(-6deg); }
    40% { transform: skewX(5deg); }
    50% { transform: skewX(-4deg); }
    60% { transform: skewX(3deg); }
    70% { transform: skewX(-2deg); }
    80% { transform: skewX(1deg); }
    90% { transform: skewX(0deg); 
100% { transform: skewX(0deg); }
}

.wiggle {
    -webkit-animation-name: wiggle;
    -moz-animation-name: wiggle;
    -o-animation-name: wiggle;
    animation-name: wiggle;

    -webkit-animation-timing-function: ease-in;
    -moz-animation-timing-function: ease-in;
    -o-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
}

更新：这是一个重现问题的小提琴： http://jsfiddle.net/3Ld8e/1/

Answer 1

跨度是内联或流动元素，因此没有位置，高度，宽度;他们只是根据他们的位置流动。

尝试更改范围

display: inline-block

这应该允许每个跨度具有自己的大小调整属性，然后可以对其进行动画处理。

在删除css类并将其添加回来之间，还需要let the browser redraw the page。当前添加和删除类时不会发生这种情况：元素在浏览器之前和之后看起来都是一样的。

最佳解决方案是侦听animationend事件，然后删除类（动画执行完毕后）。

$(document).ready(function(){

    var letters = $('.I');

    letters.on('animationend oanimationend webkitAnimationEnd', function () {
        $(this).removeClass('animated wiggle');
    });

    letters.on('click', function(){
        $(this).addClass('animated wiggle');
    });
});

更新的JSFiddle在这里：http://jsfiddle.net/thefrontender/3Ld8e/3/

Answer 2

您在动画CSS的开头缺少类选择器。现在它将动画应用于动画类的bazinga元素。

尝试将CSS3动画应用于跨度文本

2 个答案:

尝试将CS​​S3动画应用于跨度文本

2 个答案:

尝试将CSS3动画应用于跨度文本