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

问题描述

我尝试使用原生JS进行旋转，然后在一个特定的位置停止（该值将从服务器接收）。但它占用了CPU的大部分时间。

我可以使用CSS动画旋转，但我需要创建一个动态描述停止动画的类。就像

  @  -  webkit-keyframes spinIt {
 100％{
 -webkit-transform：rotate （A_DYNAMIC_VALUE）; 
 
 $ b $ @ -moz-keyframes spinIt {
 100％{
 -webkit-transform：rotate（A_DYNAMIC_VALUE）; 
 
 
 $ / code $ / pre 
 
 
以下是一个参考文献 
 
 
  http://jsfiddle.net/bVkwH/8/   p> 
 
 
在此先感谢 
 
解决方案
嗯，我不认为这很容易创建动态的  @keyframes，它们不灵活，因为它们必须是硬编码的。  
 
 
 
转换更容易处理，因为它们可以优雅地响应JavaScript执行的任何CSS更改。然而，CSS转换所带来的复杂性可能会非常有限 -   具有多个步骤的动画难以实现。
   code>  
 
 
 
这是一个CSS @keyframe动画需要解决的问题， 但他们不会提供转换所需的动态响应级别。  
 
 
 
但这些链接可能对您有所帮助
 
 
 
  Link1 ：一种工具，可以生成许多微小的@ -webkit关键帧动画脚步。这为无限选择缓解配方打开了大门。 
 
 
 
   Link2  这可能非常有用。
 
 
 
   Link3  这将非常有帮助因为它提供了一个用于创建动画并将其导出到CSS代码的UI。
 
 
 
 我猜    这个  解决方案绝对适合您。它用于动态关键帧  
I have a requirement to rotate a div and stop at a particular position ( The value will be received from the server).

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

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);
    }
}
Here is one reference 

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

Thanks in Advance
解决方案
well i don't think it is easy to create dynamic @keyframes they are inflexible because they must be hard-coded. 

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

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

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  : a tool that generates a @-webkit-keyframe animation with many tiny steps. This opens the door to an unlimited selection of easing formula. 

Link2 This might be very useful.

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.

I guess this  solution will definitely work for you. Its is used for dynamic keyframes

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