Сокращение определений ключевых кадров анимации CSS3 - PullRequest
Новая
       8

Сокращение определений ключевых кадров анимации CSS3

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

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

@-webkit-keyframes one {
    from {
        [identical properties]
    }
    [...etc...]
    80% {
        [identical properties]
    }
    to {
        margin-left: 20px;
    }
}

@-webkit-keyframes two {
    from {
        [identical properties]
    }
    [...etc...]
    80% {
        [identical properties]
    }
    to {
        margin-left: 50px;
    }
}

Этот код довольно длинный , поэтому я подумал, что он может быть легко сокращен , но похоже, что вы должны определять всю анимацию снова и снова.Я пробовал что-то подобное, но это не работает в Chrome и Safari. 

@-webkit-keyframes one, two {
    from {
        [identical properties]
    }
    [...etc...]
    80% {
        [identical properties]
    }
    to {
        margin-left: 20px;
    }
}

@-webkit-keyframes two {
    to {
        margin-left: 50px;
    }
}

Нет ли способа определить 2 одинаковые анимации?: О

Ответы [ 3 ]

1 голос
/ 03 августа 2011

Не по своей сути. Особенно с префиксами вендоров, CSS может стать действительно головокружительным, однако, если вы правильно развертываете файл (GZip, кеширование и т. Д.), Это на самом деле неэффективно, просто боль в заднице писать.

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

1 голос
/ 14 июня 2012

Чтобы избежать копирования при вставке, вы можете использовать препроцессор CSS, например SCSS / SASS и LESS . Функция mixin значительно уменьшает размер кода:

Для одного свойства достаточно написать один миксин: 

.Duplicates(@marginLeft) {
    from { /* ... */ }
    80%  { /* ... */ }
    to { margin-left: @marginLeft;}
}
@-webkit-keyframes one {
    .Duplicates(20px);
}
@-webkit-keyframes two {
    .Duplicates(50px);
}

Демонстрация: оживленный супермаркет с использованием чистого CSS (3)

Для меня предыдущий mixin был недостаточным . Я также хотел динамические имена и префиксы вендоров как? , так что мне не нужно писать правило 10 x 5 = 50 раз (10 имен, 5 продавцов). Это шанс показать мощь CSS препроцессора:

1 голос
/ 01 августа 2011

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

...