如何將JavaScript變量傳遞給我的CSS3動畫？

我有一個動畫這樣的：如何將JavaScript變量傳遞給我的CSS3動畫？

@-webkit-keyframes slideImg0 
    0% 
     background-position: center 0px 
    40% 
     background-position: center -50px 
    55% 
     background-position: center 50px 
    75% 
     background-position: center 500px 
    85% 
     background-position: center 510px 
    100% 
     background-position: center 500px

但我需要這個動畫是4倍不同的圖像略有不同。目前我已經有了slideImg1（它完全一樣，但所有像素值都是+500），slideImg2和slideImg2。浪費時間/空間，而且不可維護。

有沒有什麼辦法可以傳遞JavaScript的值來改變它？所以我可以去「運行所有值+ 500px的slideImg」？取而代之的

$(".heroImgWrapper").css("-webkit-animation", "slideImg" +counter + " 1s linear");

來源

2013-04-30 morgoe

CSS3的速度要快得多。有相當數量的動畫正在進行，我不希望它減慢舊電腦的速度。 – morgoe 2013-04-30 00:57:11

我發現JQuery動畫在手機上很慢。我真的更喜歡使用CSS3。 – morgoe 2013-04-30 01:01:45

+1拒絕爲非必要的美容細節使用jQuery。 – 2013-04-30 01:02:52

我會建議使用transition而不是動畫的，就像這樣：

transition:background-position 1s cubic-bezier(0,-1,0.8,1.3);

調整數字作爲必要的，但基本上是與控制點的0-1範圍之外的曲線將產生像動畫似乎試圖創建的彈跳效果。通過這種策略，您可以根據需要調整職位，並讓轉換完成工作。

編輯：當然你也需要-webkit-transition。另請參見http://cubic-bezier.com/來設計合適的曲線。

來源

2013-04-30 01:02:24

這裏是你可以用，只是通過在你的選擇和期望的增量代碼：

function setCss(selector, delta) { 
    var points = { 
     0: 0, 
     40: 55, 
     55: 50, 
     75: 500, 
     85: 510, 
     100: 500 
    }; 
    if (typeof delta === "undefined") delta = 0; 

    var newPoints = {}; 
    for (key in points) { 
     newPoints[key] = points[key] + delta; 
    } 

    for (key in newPoints) { 
     // Write your code here 
    } 
}

來源

2013-04-30 01:03:59 basarat

如何將JavaScript變量傳遞給我的CSS3動畫？

回答

相關問題