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。

在Javascript中动态创建规则（@rules）的CSS

1 个答案: