は中CSS3トランジションとキーフレームを使用してjQueryのの.css（）

Question

私はCSS3の遷移が

$(".box").one("click", function() { 
$(this).css({ "opacity": "1", "background": "#fff", "transition": "width 2s" }); 
}); 

にのような単純なjQueryのの.css（）

何かに

.someDiv { opacity: 1; background: #fff; transition: width 2s; } 

フォーマットを仕事に取得しようとしています

私はそれほど知っています。
しかし、JQueryを使用するためにネストされたキーフレームを持つCSS3トランジションをどのようにフォーマットしますか？

.fadeInDown { 
-webkit-animation-name: fadeInDown; 
animation-name: fadeInDown; } 

@keyframes fadeInDown { 

0% { 
    opacity: 0; 
    -webkit-transform: translate3d(0, -100%, 0); 
    transform: translate3d(0, -100%, 0); 
    } 

100% { 
     opacity: 1; 
     -webkit-transform: none; 
     transform: none; 
    } 
} 

Answer 1

これについて

それほど簡単ではありません。以下を考慮してください：

jQueryは、これらのアニメーションの設定を簡単にする$（selector）.animate（）関数を内蔵しています。しかし、jQueryのアニメーション（）それは言われていると複数のキーフレーム

をサポートしていない、あなたが望むものを達成するためにあなたをassitうjQuery.Keyframesライブラリを含めることができます。なぜあなたはありません

$.keyframe.define([{ 
 
    name: 'animation-name', 
 
    '0%': { 
 
    'opacity': '0', 
 
    'transform': 'translate3d(0, -100%, 0)' 
 
    }, 
 
    '100%': { 
 
    'opacity': '1', 
 
    'transform': 'none' 
 
    } 
 
}]);

Answer 2

ないあなたはjQueryのを使用してキーフレームを追加したいだろうが、あなたはこのようheadにCSSを追加することができる理由を確認してください。私を持たないでください

$(function() { 
 
    var keyframes = '.fadeInDown {' + 
 
        '-webkit-animation-name: fadeInDown;' + 
 
        'animation-name: fadeInDown; }' + 
 

 
        '@keyframes fadeInDown {' + 
 

 
        '0% {' + 
 
         'opacity: 0;' + 
 
         '-webkit-transform: translate3d(0, -100%, 0);' + 
 
         'transform: translate3d(0, -100%, 0);' + 
 
         '}' + 
 

 
        '100% {' + 
 
          'opacity: 1;' + 
 
          '-webkit-transform: none;' + 
 
          'transform: none;' + 
 
         '}' + 
 
        '}'; 
 
    $('<style type="text/css">' + keyframes + '</style>').appendTo($('head')); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>