Группировка ключевых кадров CSS3 - PullRequest
Новая
       8

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

2 голосов
/ 09 августа 2011

Я понял, что не могу просто выполнить тот же код ниже, разделив его комой @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;}
}

1 Ответ

3 голосов
/ 29 апреля 2012

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

Выезд

если вам интересно - усилия по их установке и настройке полностью стоят того!

РЕДАКТИРОВАТЬ: Используя 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;
    }
}

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

...