Как запустить повторную анимацию?

Question

[xverizex]

имеется такая css.

progressbar#dark_theme progress { background-color: #d1d100; border-radius: 6px; min-height: 20px; min-width: %d(end)px; animation: 2s linear col; } @keyframes col { 0% { min-width: %d(start)px; } 100% { min-width: %d(end)px; } }

вместо %d подставляется значение ( в скопках написана название переменной ). сначала я нажимаю на кнопку и применятеся этот стиль. у start: 0, у end: 90. идет плавная анимация. потом нажимаю другую кнопку, где start: 90, end: 30. но прогресс сразу в 30 становиться без анимации. что делать?

Comments

[Дмитрий]

Часто вопросы от вас, может стоит дочитать учебник?

[xverizex]

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

[xverizex]

Всё сделал. правда приходится задавать каждый раз разный ключ для анимации. можете подсказать как можно пользоваться одним и тем же @keyframe?

snprintf ( style, 4096, "window#dark_theme { background-color: #4c4c4c; } frame#dark_theme { border-radius: 8px; background-color: #4c4c4c; box-shadow: 0px 0px 10px 10px #2c2c2c; } frame#dark_theme > border { border-style: solid; border-radius: 8px; border-width: 1px; border-color: #000000; } label#dark_theme { font-family: terminus; color: #00e0d9; font-size: 21px; } label#dark_theme_level { font-family: terminus; color: #ffffff; font-size: 21px; } progressbar#dark_theme progress { background-color: #d1d100; border-radius: 6px; min-height: 20px; min-width: %dpx; animation: 2s linear col%d; } @keyframes col%d { 0% { min-width: %dpx; } 100% { min-width: %dpx; } } progressbar#dark_theme trough { background-color: #3c3c3c; border-radius: 6px; min-height: 20px; }", end, ind, ind, start, end );