是否有等效于fx off的css3动画？

是否有一个等价物用于

$.fx.off = true;

…在纯css动画/转换的世界中

---

我在一个网站上工作，该网站有大量使用jquery和css的入门动画，因此每次我更改某些内容并重新加载页面时，我都必须等待十秒钟，才能完成入门动画。这相当乏味

没有全局关闭CSS动画的方法，但是您可以使用链接模拟“关闭”的动画：

假设动画已正常绑定：

body .elementClassName {
    transition: propertyName 10s linear;
}

body:target .elementClassName {
    transition: none;
    transition: propertyName 0 linear;
}

这样，假设您的

主体

元素具有

id

（例如

），如果页面正常加载，则在

http://example.com/page.html

但是，如果页面加载为：

http://example.com/page.html#bodyElementID

不会发生转换

---

如果不演示真实的HTML，这是一个非常通用的可能性概述，但这是我能想到的唯一方法。

没有办法完全关闭CSS动画

如果要执行类似操作，请将动画片段放置在单独的CSS类中：

.AnimationOfWhatever {
    -webkit-animation: entryAnimation 10s;
    -moz-animation: entryAnimation 10s;
    -o-animation: entryAnimation 10s;
    -ms-animation: entryAnimation 10s;
    animation: entryAnimation 10s;
}

并通过jQuery在第一次加载时应用该类（因为您提到了jQuery）

这将仅加载动画一次。如果只想添加该类一次，请创建localStorage值并检查该值：

$(function(){
    if(localStorage['loaded'] === undefined){
        localStorage['loaded'] = 'true';
    }

    $('.ElementToAnimate').on('load',function(){
        if(!JSON.parse(localStorage['loaded'])){
            $(this).addClass('AnimationOfWhatever');
        }
    });
});

---

这将仅在所有页面上运行动画一次。

这将使所有动画和过渡在启动后立即跳到最后一帧，并消除延迟：

* {
    -webkit-animation-duration: 0s !important;
    animation-duration: 0s !important;
    -webkit-animation-delay: 0s !important;
    animation-delay: 0s !important;

    -webkit-transition-duration: 0s !important;
    transition-duration: 0s !important;
    -webkit-transition-delay: 0s !important;
    transition-delay: 0s !important;
}

要以编程方式应用它，请将选择器更改为

.no anim*

，并将

no anim

类应用于

（或其他包含元素）

我还没有对它进行测试，但至少在简单的用例中它似乎工作得很好。可以根据您的需要随意调整、评论和改进

* {
    -webkit-animation-duration: 0s !important;
    animation-duration: 0s !important;
    -webkit-animation-delay: 0s !important;
    animation-delay: 0s !important;

    -webkit-transition-duration: 0s !important;
    transition-duration: 0s !important;
    -webkit-transition-delay: 0s !important;
    transition-delay: 0s !important;
}