Группировка ключевых кадров CSS3

Question

Я понял, что я не могу просто выполнить тот же код ниже, разделив coma @keyframes mymove, @-moz-keyframes mymove, etc... Чтобы они работали, мне нужно объявить их каждый отдельно, как показано ниже.

Есть ли способ сгруппировать их и сделать этот код короче?

@keyframes mymove 
{ 
from {top:0px;} 
to {top:200px;} 
} 

@-moz-keyframes mymove /* Firefox */ 
{ 
from {top:0px;} 
to {top:200px;} 
} 

@-webkit-keyframes mymove /* Safari and Chrome */ 
{ 
from {top:0px;} 
to {top:200px;} 
} 

Answer 1

нет, я не думаю, что это так, но вы можете использовать язык CSS (ака CSS препроцессора) как SASS/SCSS/МЕНЬШЕ/... - выход (CSS) все равно будет то же самое, но изменить что-то было бы намного проще!

Заканчивать

• http://sass-lang.com/
• http://coding.smashingmagazine.com/2011/09/09/an-introduction-to-less-and-comparison-to-sass/

если вы заинтересованы - усилие их установки и настройки их полностью стоит!

EDIT: Использование SCSS я сделал следующее:

@mixin keyframes($name) { 
    @-webkit-keyframes #{$name} { @content; } 
    @-moz-keyframes #{$name} { @content; } 
    @keyframes #{$name} { @content; } 
} 

пример использования:

@include keyframes(pulse) { 
    0%,100% { 
     opacity: 0; 
    } 
    50% { 
     opacity: 1; 
    } 
} 

Хотя следует добавить, что вам потребуется последняя пре-релиз ШАОН, чтобы иметь возможность (у нас есть "{" внутри другого "правила {...), поэтому вам следует обновить пробег« gem install sass -pre », который должен получить вас« sass-3.2.0.alpha.104 »