使用CSS3過渡和關鍵幀在JQuery中的.css（）

Question

我試圖讓CSS3過渡到在JQuery中的.css（）

要簡單

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

格式的工作就像進

$(".box").one("click", function() { 
$(this).css({ "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的animate（）不支持多個關鍵幀

就這麼說，你可以包括jQuery.Keyframes庫，它可以幫助你實現你想要的。

只需使用你提供的代碼，你將能夠通過介紹jQuery的-given您添加jQuery.Keyframes動畫 - 像這樣的東西：

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

Answer 2

不知道爲什麼你會希望添加使用jQuery關鍵幀，但您可以添加CSS到head這樣的：

$(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>