Ответ 1

Использовать CSSOM

var style = document.documentElement.appendChild(document.createElement("style")),
rule = " run {\
    0%   {\
        -webkit-transform: translate3d(0, 0, 0); }\
        transform: translate3d(0, 0, 0); }\
    }\
    100% {\
        -webkit-transform: translate3d(0, " + your_value_here + "px, 0);\
        transform: translate3d(0, " + your_value_here + "px, 0);\
    }\
}";
if (CSSRule.KEYFRAMES_RULE) { // W3C
    style.sheet.insertRule("@keyframes" + rule, 0);
} else if (CSSRule.WEBKIT_KEYFRAMES_RULE) { // WebKit
    style.sheet.insertRule("@-webkit-keyframes" + rule, 0);
}

Если вы хотите изменить правило ключевого кадра в уже включенной таблице стилей, выполните следующие действия:

var
      stylesheet = document.styleSheets[0] // replace 0 with the number of the stylesheet that you want to modify
    , rules = stylesheet.rules
    , i = rules.length
    , keyframes
    , keyframe
;

while (i--) {
    keyframes = rules.item(i);
    if (
        (
               keyframes.type === keyframes.KEYFRAMES_RULE
            || keyframes.type === keyframes.WEBKIT_KEYFRAMES_RULE
        )
        && keyframes.name === "run"
    ) {
        rules = keyframes.cssRules;
        i = rules.length;
        while (i--) {
            keyframe = rules.item(i);
            if (
                (
                       keyframe.type === keyframe.KEYFRAME_RULE
                    || keyframe.type === keyframe.WEBKIT_KEYFRAME_RULE
                )
                && keyframe.keyText === "100%"
            ) {
                keyframe.style.webkitTransform =
                keyframe.style.transform =
                    "translate3d(0, " + your_value_here + "px, 0)";
                break;
            }
        }
        break;
    }
}

Если вы не знаете порядок, но знаете URL-адрес файла CSS, замените document.styleSheets[0] на document.querySelector("link[href=' your-css-url.css ']").sheet.

Ответ 2

Вы пытались объявить часть ключевого кадра вашего css в элементе <style> в заголовке вашего html-документа. Затем вы можете дать этому элементу идентификатор или что-то еще и изменить его содержимое, когда захотите, с помощью javaScript. Что-то вроде этого:

<style id="keyframes">
        @-webkit-keyframes run {
            0%    { -webkit-transform: translate3d(0px,0px,0px); }            
            100%  { -webkit-transform: translate3d(0px, 1620px, 0px); }
        }
</style>

Тогда ваш jquery может изменить это как обычно:

$('#keyframes').text('whatever new values you want in here');

Ответ 3

Ну, из вашего примера мне кажется, что анимация CSS может быть излишней. Вместо этого используйте переходы:

-webkit-transition: -webkit-transform .4s linear; /* you could also use 'all' instead of '-webkit-transform' */

а затем применить новое преобразование к элементу через js:

$("<yournode>")[0].webkitTransform = "translate3d(0px,"+ (height*i) +"px,0px)";

Он должен анимировать это.

Ответ 4

Я не получал, когда вы хотели изменить эти значения (т.е. использовать переменные), но, тем не менее, здесь есть от 3 до 4 решений и 1 невозможное решение (на данный момент).

• расчет на стороне сервера: для того, чтобы время от времени обслуживать разные CSS, вы можете указать PHP или любому серверному языку для анализа файлов .css, а также .php или .html, а затем использовать PHP-переменные между тегами PHP. Остерегайтесь кэширования файлов: чтобы избежать этого, вы можете загрузить таблицу стилей, такую ​​как style.css? 1234567890случайно-время, это создаст кажущийся другой файл и, следовательно, не будет кэшироваться

• SASS также является серверным решением, которое нуждается в Ruby и предоставит вам существующий синтаксис, возможно, более чистый, чем ручной дизайн, поскольку другие уже имеют проблемы и решения.

• LESS - это клиентское решение, которое будет загружать ваш .less файл и less.js, который будет анализировать первый и предоставлять переменные в CSS независимо от вашего сервера. Он также может работать на стороне сервера с помощью node.js

• CSS динамически изменен, пока отображается ваша страница?
  Для 2D есть jquery-animate-enhance от Ben Barnett, 2d-transform или CSS3 rotate разворачиваются наоборот (они используют CSS3 там, где это возможно, и где нет таких функций, они отступают от существующих jQuery.animate() и фильтр матрицы IE), но что это.
  Вы можете создать плагин для jQuery, который бы управлял несколькими параметрами, чего вы хотите достичь с помощью 3D Transformation, и избегайте хлопот изменения длинного и сложного Правила CSS в DOM

• Только CSS: вы можете использовать -moz-calc [1] [2], который работает только в Firefox 4.0 с -webkit-transform, который работает только в... OK nevermind: -)

Ответ 5

Попробуйте что-то вроде этого:

var height = {whatever height setting you want to detect};
element.style.webkitTransform = "translate3d(0px," + height*i + ",0px)";

Ответ 6

Решение A Chunky?

Создавайте преобразования для высот в выбранной вами гранулярности, скажем 0-99, 100-199, 200-299 и т.д. Каждый с уникальным идентификатором имени анимации, например:

@-webkit-keyframes run100 {
        0%    { -webkit-transform: translate3d(0px,0px,0px); }            
        100%  { -webkit-transform: translate3d(0px,100px,0px); }
}

@-webkit-keyframes run200 {
        0%    { -webkit-transform: translate3d(0px,0px,0px); }            
        100%  { -webkit-transform: translate3d(0px,200px,0px); }
}

затем создайте соответствующие классы css:

.height-100 div { 
    -webkit-animation-name: run100;  
}

.height-200 div { 
    -webkit-animation-name: run200;  
}

затем с помощью javascript выберите, в какой части вы находитесь, и назначьте соответствующий класс окружающему элементу.

$('#frame').attr('class', '').addClass('height-100');

Может быть, если гранулярность не станет слишком тонкой!

Ответ 7

Я использовал решение warmanp, и оно сработало, но с очень важной настройкой.

$('#ticket-marquee-css').text(
    "@-webkit-keyframes marqueeR{ 0%{text-indent: -" + distanceToMove + "px;} 100%{text-indent: 0;} }" + 
    "@-webkit-keyframes marqueeL{ 0%{text-indent: 0;} 100%{text-indent: -" + distanceToMove + "px;} }"
);

Чтобы получить переход CSS для обновления, вместо использования ранее определенных значений мне пришлось остановить анимацию, а затем перезапустить. Чтобы сделать это, я поместил класс "active" в элементы и сделал CSS только применить переход к элементам, у которых был этот класс

#marquee1.active {-webkit-animation-name: marqueeL;}
#marquee2.active {-webkit-animation-name: marqueeR;}

Затем мне просто пришлось отключить "активный" класс, дождаться его применения в DOM (отсюда и setTimeout), а затем повторно применить его.

$('.ticket-marquee').removeClass('active');
setTimeout(function() { $('.ticket-marquee').addClass('active'); },1);

И это отлично работает! Теперь я могу динамически изменять расстояние, на которое перемещается текст!