有没有办法对特定于浏览器的css3动画进行分组？

时间：2014-05-26 09:03:57

标签： html css css3 css-animations

我想制作一个CSS3动画，其中div在鼠标上方获得一个盒子阴影，并在鼠标移出时丢失它。这就是我到目前为止所做的：

HTML：

<div id="page">
    <div id="container" onmouseover="mouseOverContainer()" onmouseout="mouseOutContainer()" class="">

    </div>
</div>

JS：

var container = undefined;
function assignContainer() {
    if(container===undefined) {
        container = document.getElementById("container");
    }
}
function mouseOverContainer() {
    assignContainer();
    container.className="container-in";
}
function mouseOutContainer() {
    assignContainer();
    container.className="container-out";
}

CSS：

@keyframes box-shadow-anim-in{
    from {
        box-shadow: 0 0 0 rgba(0,0,0,0.0);
        background-color: #ccc;
        margin-top: 20px;
        margin-top: 20px;
    }
    to {
        box-shadow: 0 0 250px rgba(127,127,127,1.0);
        background-color: #efefef;
        margin-top: 18px;
        margin-top: 18px;
    }
}
@-o-keyframes box-shadow-anim-in{
    from {
        -o-box-shadow: 0 0 0 rgba(0,0,0,0.0);
        background-color: #ccc;
        margin-top: 20px;
    }
    to {
        -o-box-shadow: 0 0 250px rgba(127,127,127,1.0);
        background-color: #efefef;
        margin-top: 18px;
    }
} 
@-webkit-keyframes box-shadow-anim-in{
    from {
        -webkit-box-shadow: 0 0 0 rgba(0,0,0,0.0);
        background-color: #ccc;
        margin-top: 20px;
    }
    to {
        -webkit-box-shadow: 0 0 250px rgba(127,127,127,1.0);
        background-color: #efefef;
        margin-top: 18px;
    }
} 
@-ms-keyframes box-shadow-anim-in{
    from {
        -ms-box-shadow: 0 0 0 rgba(0,0,0,0.0);
        background-color: #ccc;
        margin-top: 20px;
    }
    to {
        -ms-box-shadow: 0 0 250px rgba(127,127,127,1.0);
        background-color: #efefef;
        margin-top: 18px;
    }
} 
@-moz-keyframes box-shadow-anim-in  {
    from {
        -moz-box-shadow: 0 0 0 rgba(0,0,0,0.0);
        background-color: #ccc;
        margin-top: 20px;
    }
    to {
        -moz-box-shadow: 0 0 250px rgba(127,127,127,1.0);
        background-color: #efefef;
        margin-top: 18px;
    }
}

@keyframes box-shadow-anim-out{
    from {
        box-shadow: 0 0 250px rgba(127,127,127,1.0);
        background-color: #efefef;
        margin-top: 18px;
    }
    to {
        box-shadow: 0 0 0 rgba(0,0,0,0.0);
        background-color: #ccc;
        margin-top: 20px;
    }
}
@-moz-keyframes box-shadow-anim-out{
    from {
        -moz-box-shadow: 0 0 250px rgba(127,127,127,1.0);
        background-color: #efefef;
        margin-top: 18px;
    }
    to {
        -moz-box-shadow: 0 0 0 rgba(0,0,0,0.0);
        background-color: #ccc;
        margin-top: 20px;
    }
} 
@-o-keyframes box-shadow-anim-out{
    from {
        -o-box-shadow: 0 0 250px rgba(127,127,127,1.0);
        background-color: #efefef;
        margin-top: 18px;
    }
    to {
        -o-box-shadow: 0 0 0 rgba(0,0,0,0.0);
        background-color: #ccc;
        margin-top: 20px;
    }
}
@-webkit-keyframes box-shadow-anim-out {
    from {
        -webkit-box-shadow: 0 0 250px rgba(127,127,127,1.0);
        background-color: #efefef;
        margin-top: 18px;
    }
    to {
        -webkit-box-shadow: 0 0 0 rgba(0,0,0,0.0);
        background-color: #ccc;
        margin-top: 20px;
    }
}
@-ms-keyframes box-shadow-anim-out{
    from {
        -ms-box-shadow: 0 0 250px rgba(127,127,127,1.0);
        background-color: #efefef;
        margin-top: 18px;
    }
    to {
        -ms-box-shadow: 0 0 0 rgba(0,0,0,0.0);
        background-color: #ccc;
        margin-top: 20px;
    }
} 

#page {
    width: 900px;
    margin: 0 auto;
}

#container {
    width: 60%;
    height: 250px;
    background-color: #ccc;
    margin-top: 20px;
    border: 1px solid #999;
}
.container-out {
    animation: box-shadow-anim-out 0.3s;
    -moz-animation: box-shadow-anim-out 0.3s;
    -webkit-animation: box-shadow-anim-out 0.3s;
    -o-animation: box-shadow-anim-out 0.3s;
    -ms-animation: box-shadow-anim-out 0.3s;

    animation-fill-mode: forwards;
    -moz-animation-fill-mode: forwards;
    -o-animation-fill-mode: forwards;
    -ms-animation-fill-mode: forwards;
    -webkit-animation-fill-mode: forwards;
}

.container-in {
    animation: box-shadow-anim-in 0.3s;
    -moz-animation: box-shadow-anim-in 0.3s;
    -webkit-animation: box-shadow-anim-in 0.3s;
    -o-animation: box-shadow-anim-in 0.3s;
    -ms-animation: box-shadow-anim-in 0.3s;

    animation-fill-mode: forwards;
    -moz-animation-fill-mode: forwards;
    -o-animation-fill-mode: forwards;
    -ms-animation-fill-mode: forwards;
    -webkit-animation-fill-mode: forwards;
}

一切正常，正如您在this JSFiddle中看到的那样。

但是，正如您所看到的，我们必须定义特定于浏览器的keyframes，以使其适用于所有浏览器。

这有点无聊，特别是当您必须在一个动画中更改一个小细节时，因为您还必须更改所有其他特定于浏览器的动画。

我以为我只能使用一个块，插入用逗号分隔的所有关键帧，如下所示：

@keyframes box-shadow-anim-in,
@-o-keyframes box-shadow-anim-in,
@-webkit-keyframes box-shadow-anim-in,
@-ms-keyframes box-shadow-anim-in,
@-moz-keyframes box-shadow-anim-in  {
    from {
        box-shadow: 0 0 0 rgba(0,0,0,0.0);
        -o-box-shadow: 0 0 0 rgba(0,0,0,0.0);
        -webkit-box-shadow: 0 0 0 rgba(0,0,0,0.0);
        -ms-box-shadow: 0 0 0 rgba(0,0,0,0.0);
        -moz-box-shadow: 0 0 0 rgba(0,0,0,0.0);
        background-color: #ccc;
        margin-top: 20px;
    }
    to {
        box-shadow: 0 0 250px rgba(127,127,127,1.0);
        -o-box-shadow: 0 0 250px rgba(127,127,127,1.0);
        -webkit-box-shadow: 0 0 250px rgba(127,127,127,1.0);
        -ms-box-shadow: 0 0 250px rgba(127,127,127,1.0);
        -moz-box-shadow: 0 0 250px rgba(127,127,127,1.0);
        background-color: #efefef;
        margin-top: 18px;
    }
}

@keyframes box-shadow-anim-out,
@-o-keyframes box-shadow-anim-out,
@-webkit-keyframes box-shadow-anim-out,
@-ms-keyframes box-shadow-anim-out,
@-moz-keyframes box-shadow-anim-out {
    from {
        box-shadow: 0 0 250px rgba(127,127,127,1.0);
        -o-box-shadow: 0 0 250px rgba(127,127,127,1.0);
        -webkit-box-shadow: 0 0 250px rgba(127,127,127,1.0);
        -ms-box-shadow: 0 0 250px rgba(127,127,127,1.0);
        -moz-box-shadow: 0 0 250px rgba(127,127,127,1.0);
        background-color: #efefef;
        margin-top: 18px;
    }
    to {
        box-shadow: 0 0 0 rgba(0,0,0,0.0);
        -o-box-shadow: 0 0 0 rgba(0,0,0,0.0);
        -webkit-box-shadow: 0 0 0 rgba(0,0,0,0.0);
        -ms-box-shadow: 0 0 0 rgba(0,0,0,0.0);
        -moz-box-shadow: 0 0 0 rgba(0,0,0,0.0);
        background-color: #ccc;
        margin-top: 20px;
    }
}

但这似乎不起作用（JSFiddle here），所以也许我做错了什么或者我不能这样做。

有可能做这样的事吗？如果是，怎么样？

2 个答案:

答案 0 :(得分：1)

不，CSS无法实现。您不能将不同的规则组合在一起，就像您可以对供应商前缀选择器进行分组一样。

您可以使用Sass / LESS mixin，但是假设您已经使用预处理器，并且无论如何只是输出单独的重复CSS规则。

对于它的价值，有几个前缀可以删除，以减少CSS中的一些膨胀：

    IE的任何稳定版本都不使用

  • @-ms-keyframes和-ms-animation; IE10开箱即用，支持它们无前缀

  • 从version 16

    • 开始，Firefox还支持无前缀@keyframes / animation

  • -ms-box-shadow和-o-box-shadow从未存在，因此应将其删除/取消固定

    • 只有Firefox 3.5和3.6才需要

  • -moz-box-shadow，它们都不支持在version 5中添加的CSS动画（甚至不是@-moz-keyframes），所以它应该是没有前缀

您还应该将无前缀项放在最后而不是第一位，以确保（通过级联）它优先于支持它的浏览器中的前缀项。

答案 1 :(得分：1)

如果没有SASS或LESS等预处理器，这是不可能的。

但是，还有另一种选择使用JS。看看这里：http://leaverou.github.io/prefixfree/

我个人建议您切换到CSS预处理器，因为它在未来无疑会很方便。

相关问题
最新问题