如何动态创建“@ -Keyframe”CSS动画 [英] How to dynamically create '@-Keyframe' CSS animations

问题描述

我需要旋转一个div并停在一个特定的位置（该值将从服务器接收）。

I have a requirement to rotate a div and stop at a particular position ( The value will be recieved from server).

我尝试了本地JS旋转和停止但它吃掉我的CPU大时间。

I tried native JS to rotate and stop but its eating up my CPU big time.

我可以旋转与CSS动画，但我需要创建一个类，将动态描述停止动画的位置。像

I can rotate with CSS animation but I need to create a class which will dynamically describe where to stop the animation. Something like

@-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/

感谢进阶

推荐答案

很好，我不认为创建动态很容易 @keyframes它们不灵活，因为它们必须硬编码。

well i don't think it is easy to create dynamic @keyframes they are inflexible because they must be hard-coded.

更容易使用，因为他们可以优雅地响应JavaScript执行的任何CSS更改。

Transitions are a little easier to work with, as they can gracefully respond to any CSS changes performed by JavaScript.

但是，CSS转换可以给你的复杂性非常有限 - 很难实现具有多个步骤的动画。 code>

However, the complexity that CSS transitions can give you is pretty limited — an animation with multiple steps is difficult to achieve.

这是CSS @keyframe动画要解决的问题，

This is a problem that CSS @keyframe animations are meant to solve, but they don’t offer the level of dynamic responsiveness that transitions do.

，但这些链接可能会帮助您

but these links might help you

Link1 ：一种工具，可以生成带有许多小小的@ -webkit-keyframe动画脚步。这打开了无限选择的宽松公式的大门。

Link1 : a tool that generates a @-webkit-keyframe animation with many tiny steps. This opens the door to an unlimited selection of easing formula.

Link2 这可能非常有用。

Link2 This might be very useful.

Link3 这将是一个很大的帮助因为它提供了一个UI来创建动画并将其导出到CSS代码。

Link3 it will be a great help for you to take it as a base as it provides a UI to create animations and exports it to CSS code.

我猜 此 解决方案绝对适合您。它用于动态关键帧

这篇关于如何动态创建“@ -Keyframe”CSS动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！