如何防止不支持的浏览器的 css 动画并在 js 被停用时允许支持答案

【问题标题】：How to prevent css animation for unsupportive browsers and allow for supported if js is deactivated如何防止不支持的浏览器的 css 动画并在 js 被停用时允许支持
【发布时间】：2014-04-20 10:52:23
【问题描述】：

到目前为止，我已经通过现代化检查处理了一些事情。我有一个底部框高度为 30% 的图像。 On :hover a hidden before element 100% 跨越图像。

.fp-bb {
    .cssanimationsjs &:hover {
        @include animation('box-up 1s');
        height:100%;
        overflow:hidden;
    }   
    .cssanimationsjs &:hover .fp-pro-excerpt {
        display:block;
    }   
    .fp-pro-excerpt {
        display:none;
    }
}

该跨越动画基于：

@mixin keyframes($animation-name) {
    @-webkit-keyframes $animation-name {
        @content;
    }
    @-moz-keyframes $animation-name {
        @content;
    }
    @-ms-keyframes $animation-name {
        @content;
    }
    @-o-keyframes $animation-name {
        @content;
    }
    @keyframes $animation-name {
        @content;
    }
}

@mixin animation($str) {
    -webkit-animation: #{$str};
    -moz-animation: #{$str};
    -ms-animation: #{$str};
    -o-animation: #{$str};
    animation: #{$str};
}

基本上所有的麻烦都为 ie9 解决了，因为它不支持 css3 动画。到目前为止，如果打开js，它就可以工作。在所有受支持的浏览器上，动画在不受支持的 ie9 上运行，没有任何反应——完美。我唯一的问题是，如果 js 被关闭，是否有可能以某种方式覆盖这个案例？动画在受支持的浏览器上运行（目前不支持），在不受支持的 ie9 上没有动画运行（就像现在一样）。意味着在这种情况下是否有办法使现代化程序过时，或者是否有办法设法用它来覆盖 no-js 情况？最好的问候拉尔夫

【问题讨论】：

您的网站是否完全支持在不启用 JavaScript 的情况下运行？如果没有，那似乎真的不值得付出努力。在这种情况下，我会有一个单独的
是的，其余的在没有 JS 的情况下运行完美。基本上我只是希望有一种方法可以在所有受支持的浏览器上运行 css 动画，无论 js 是打开还是关闭，并忽略不支持的浏览器（如 ie9）上的 css 动画，无论 js 是打开还是关闭。
考虑为此目的使用“库”，它应该是更简单和更清洁的方式。例如，GSAP 既聪明又高效。

标签： css internet-explorer css-animations

【解决方案1】：

如果您希望 css 动画在可用时始终运行，请不要将其用作选择器。只需关闭 javascript 中的缺失值（即if (no-cssanimationjs) {//do js stuff}，并在选择器中完全忽略.cssanimationsjs

【讨论】：