は、私は次のキーフレームアニメーションを持ってjQueryの

Question

を使用してCSSアニメーションを変更し、

@-webkit-keyframes rotate { 
    from { 
    -webkit-transform: rotateY(0); 
    -moz-transform: rotateY(0); 
    transform: rotateY(0); 
    } 

    to { 
    -webkit-transform: rotateX(2160deg); 
    -moz-transform: rotateX(2160deg); 
    transform: rotateX(2160deg); 
    } 
} 

は今、ある条件の下で、私はこのアニメのto {}一部、その後、回転を変更したいと思います。

.css（？）を使用してこれを達成したいと思います。複数のアニメーションを使用せずにこれを行うにはどうすればよいですか？代わりにCSSを変更するだけですか？

Answer 1

.cssこの方法では-webkit-keyframesをサポートしていません。ただし、styleタグを追加することで、新しいWebKitキーフレームをオンザフライで生成できます。このコードでは、JavaScriptの複数行のクォート文字 `（小文字のチルダ）を使用しました。

あなたはCSSトランジションを経由して何かをアニメーション化することができるようにしたい場合：

var uniqueRotate = 0; 
 

 
$('#test').click(function() { 
 
    var amountToRotate = Math.floor(180 * Math.random()) + 'deg', 
 
     myRotateId = 'rotate' + uniqueRotate++; 
 
    $('<style>') 
 
    .text(` 
 
    @-webkit-keyframes ` + myRotateId + ` { 
 
     from { 
 
     -webkit-transform: rotateY(0); 
 
     -moz-transform: rotateY(0); 
 
     transform: rotateY(0); 
 
     } 
 

 
     to { 
 
     -webkit-transform: rotateX(` + amountToRotate + `); 
 
     -moz-transform: rotateX(` + amountToRotate + `); 
 
     transform: rotateX(` + amountToRotate + `); 
 
     } 
 
    } 
 
    `) 
 
    .appendTo(document.body); 
 
    $(this).css('animation', '1s ease-out 0s 1 ' + myRotateId); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://code.jquery.com/color/jquery.color-2.1.2.min.js"></script> 
 
<div id='test'>Testing cool stuff! Please click me!</div>

あなたしか変換変更する場合：

var uniqueRotate = 0; 
 

 
$('#test').click(function() { 
 
    var amountToRotate = 180 * Math.random(), 
 
     animationTime = 2*1000, 
 
     updatePerMs = 20, 
 
     iterations = 0; // every 20 ms we update our timer 
 
    var myTimer = setInterval(function() { 
 
    iterations++; 
 
    var ratio = (updatePerMs*iterations)/animationTime, 
 
     current = Math.floor(ratio * amountToRotate); 
 
    if (ratio > 1) { 
 
     clearInterval(myTimer); 
 
     return; 
 
    } 
 
    $(this).css({ 
 
     '-webkit-transform': 'rotateX(' + current + 'deg)', 
 
     '-moz-transform': 'rotateX(' + current + 'deg)', 
 
     'transform': 'rotateX(' + current + 'deg)' 
 
    }); 
 
    }.bind(this), updatePerMs); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://code.jquery.com/color/jquery.color-2.1.2.min.js"></script> 
 
<div id='test'>Testing cool stuff! Please click me!</div>