如何动态创建'@ -Keyframe'CSS动画？

Question

我需要旋转div并停在特定位置(该值将从服务器接收).

我尝试原生JS旋转和停止,但它耗费了我的CPU大时间.

我可以用CSS动画旋转,但我需要创建一个动态描述停止动画的位置的类.就像是

@-webkit-keyframes spinIt {
    100% {
        -webkit-transform: rotate(A_DYNAMIC_VALUE);
    }
}
@-moz-keyframes spinIt {
    100% {
        -webkit-transform: rotate(A_DYNAMIC_VALUE);
    }
}

这是一个参考

http://jsfiddle.net/bVkwH/8/

提前致谢

Answer 1

您可以动态插入样式表规则以覆盖头部中的先前样式.这有助于避免为单个任务添加另一个库.

var style = document.createElement('style');
style.type = 'text/css';
var keyFrames = '\
@-webkit-keyframes spinIt {\
    100% {\
        -webkit-transform: rotate(A_DYNAMIC_VALUE);\
    }\
}\
@-moz-keyframes spinIt {\
    100% {\
        -webkit-transform: rotate(A_DYNAMIC_VALUE);\
    }\
}';
style.innerHTML = keyFrames.replace(/A_DYNAMIC_VALUE/g, "180deg");
document.getElementsByTagName('head')[0].appendChild(style);

Answer 2

我不认为创建动态很容易@keyframes它们不灵活,因为它们必须是硬编码的.

转换更容易使用,因为它们可以优雅地响应JavaScript执行的任何CSS更改.

但是,CSS过渡的复杂性非常有限 - 很难实现具有多个步骤的动画.

这是CSS @keyframe动画要解决的问题,但它们不提供转换所具有的动态响应级别.

但这些链接可能对你有帮助

Link1 :一个生成带有许多微小步骤的@ -webkit关键帧动画的工具.这为无限选择的宽松配方打开了大门.

Link2这可能非常有用.

Link3将为您提供一个很好的帮助,因为它提供了一个UI来创建动画并将其导出到CSS代码.

我想 这个 解决方案肯定会对你有用.它用于动态关键帧

Answer 3

现在可以使用新的Web Animations API轻松实现这一点，如下所示：

const anim = document.getElementById("foo").animate(
  [
    { transform: `rotate(${A_DYNAMIC_VALUE})` }
  ],
  { duration: 3000, iterations: Infinity }
);

// and later
anim.pause();

第一个参数采用.animate关键帧列表，第二个参数采用动画选项（例如持续时间、重复次数等）。

Answer 4

Alex Grande的答案适用于几个关键帧.但是,假设你想要一遍又一遍地动态地继续添加关键帧,那么你的网页真的很快就会变得非常迟缓.要解决此问题,只需停止创建新的DOM元素即可.相反,创建1个新的DOM样式表,并将其与inertRule一起重用.如果您想要更多关键帧(例如,如果您在每个动画帧中生成新的关键帧),则需要设置一个系统,在不再使用旧关键帧后删除这些关键帧.这是一个良好的开端,可以实现这样的事情.

var myReuseableStylesheet = document.createElement('style'),
    addKeyFrames = null;
document.head.appendChild( myReuseableStylesheet );
if (CSS && CSS.supports && CSS.supports('animation: name')){
    // we can safely assume that the browser supports unprefixed version.
    addKeyFrames = function(name, frames){
        var pos = myReuseableStylesheet.length;
        myReuseableStylesheet.insertRule(
            "@keyframes " + name + "{" + frames + "}", pos);
    }
} else {
    addKeyFrames = function(name, frames){
        // Ugly and terrible, but users with this terrible of a browser
        // *cough* IE *cough* don't deserve a fast site
        var str = name + "{" + frames + "}",
            pos = myReuseableStylesheet.length;
        myReuseableStylesheet.insertRule("@-webkit-keyframes " + str, pos);
        myReuseableStylesheet.insertRule("@keyframes " + str, pos+1);
    }
}

用法示例:

addKeyFrames(
    'fadeAnimation',
    '0%{opacity:0}' + 
    '100%{opacity:1}'
);

此外,亚历克斯大,我敢肯定,document.getElementsByTagName('head')[0]并且type = 'text/css'还没有被IE8需要,并且@keyframes不支持,直到IE10.只是说......

Answer 5

让我分享一个更新的（2019）答案。

是的，没有使用CSS变量的Javascript（所有现代浏览器都支持）是可能的。

--lightScaleStart: 0.8;

.light {
    animation: grow 2s alternate infinite ease-in-out;
}

.light.yellow {
    --lightScaleEnd: 1.1;
}

.light.red {
    --lightScaleEnd: 1.2;
}

@keyframes grow {
  from {
    transform: scale(var(--lightScaleStart));
  }
  to {
    transform: scale(var(--lightScaleEnd));
  }
}

参见有关带有CSS变量的 Codepen 动态CSS动画的演示

编辑：这也是关于它的CSS技巧文章。