在Javascript中动态创建CSS at rules (@rules)

Question

我在动态创建CSS动画，所以我需要在文档中插入一个CSS计时函数。如下所示：

@-webkit-keyframes slide 
{
    from {
    -webkit-transform: translateX(-100px) translateY(-100px);
    -webkit-animation-timing-function: ease-in;
    }

    33% {
    -webkit-transform: translateX(-100px) translateY(-50px);
    -webkit-animation-timing-function: linear;
    }

    66% {
    -webkit-transform: translateX(-50px) translateY(0px);
    -webkit-animation-timing-function: linear;
    }


    to {
    -webkit-transform: translateX(0px) translateY(0px);
    -webkit-animation-timing-function: ease-out;
    }
}

你知道如何使用Javascript完成这个(插入)吗？我可以毫不费力地添加常规类，但这似乎是一个特例。

Answer 1

实际上，它与向样式表添加任何其他样式规则没有什么不同：

var selector = "@-webkit-keyframes slide";
var rule = "{   from {  -webkit-transform: translateX(-100px) translateY(-100px);   -webkit-animation-timing-function: ease-in; }   33% {   -webkit-transform: translateX(-100px) translateY(-50px);    -webkit-animation-timing-function: linear;  }   66% {   -webkit-transform: translateX(-50px) translateY(0px);   -webkit-animation-timing-function: linear;  }   to {    -webkit-transform: translateX(0px) translateY(0px); -webkit-animation-timing-function: ease-out;    }       }";

document.styleSheets[0].insertRule(selector + rule, 0);

注意，上面的DOM操作是特定于WebKit (和FireFox)的。您需要为IE的s/insertRule/addRule添加一些逻辑。