Действительно для применения одной анимации css к нескольким элементам

Question

Я не могу найти ответ на этот вопрос в любых документах, и я не могу увидеть этот вопрос, заданный ранее в Stack.

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

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

.btn.tap.area:hover + .ring.container .ring.a, 
    .btn.tap.area:hover + .ring.container .ring.c { 
    animation-name: clockwise; 
    } 
    .btn.tap.area:hover + .ring.container .ring.b, 
    .btn.tap.area:hover + .ring.container .ring.d { 
    animation-name: counter-clockwise; 
    } 

    .btn.tap.area:hover + .ring.container .ring.a { 
    animation-duration: 1.33s; 
    } 
    .btn.tap.area:hover + .ring.container .ring.b { 
    animation-duration: 1s; 
    } 
    .btn.tap.area:hover + .ring.container .ring.c { 
    animation-duration: .67s; 
    } 
    .btn.tap.area:hover + .ring.container .ring.d { 
    animation-duration: .33s; 
    } 

    @keyframes clockwise { 
    from { 
     transform: rotate(0deg); 
    } 
    to { 
     transform: rotate(360deg); 
    } 
    } 
    @keyframes counter-clockwise { 
    from { 
     transform: rotate(0deg); 
    } 
    to { 
     transform: rotate(-360deg); 
    } 
    } 

Answer 1

Да, применяя одну анимацию многих элементов вполне допустимо. Он не только экономит на том, что нужно сделать для браузера, не используя повторяющиеся анимации, он сохраняет kb в самом файле CSS. Плюс, если вам нужно только вызвать одну анимацию для многих элементов, если что-то не так, становится легче ее исправить позже.

Ближайшей вещь, которую я могу найти только беглое исследование:

Того же @keyframes правила имени может повторяться в пределах анимации имени- . Изменения в обновлении анимационного имени существующих анимаций путем повторного итерации по новому списку анимаций от последнего до , а для каждой анимации поиск последней подходящей анимации в - список существующих анимаций. Если совпадение найдено, существующая анимация обновляется с использованием свойств анимации, соответствующих , ее позиции в новом списке анимаций, сохраняя при этом текущее время воспроизведения , как описано выше. Соответствующая анимация удалена из существующего списка анимаций, так что она не будет совпадений дважды. Если совпадение не найдено, создается новая анимация. Как результат , обновление анимационного имени от 'a' до 'a, a' приведет к тому, что существующая анимация для 'a' станет второй анимацией в списке , и новая анимация будет создана для первого элемента в список.

Взят из: https://drafts.csswg.org/css-animations/#animations

Где это будет означать, что один повторил анимацию в одном animation-name свойства справедливо, я бы предположить, что расширение правила для нескольких элементов также является допустимым. Этот и личный опыт применения одной анимации по нескольким элементам никогда не сломал страницу, вызвал ошибку или ошибку.

---

UPDATE: (. Что мы знаем правомерно использовать один фон на нескольких элементов)

Этот пункт лучше описывает намерения, и считает, что она аналогична с фоном собственности

4.2. Свойство анимационного имени

Свойство animation-name определяет список применяемых анимаций. Каждое имя используется для выбора ключевого кадра, которое предоставляет значения свойств для анимации. Если имя не соответствует какому-либо ключевому кадру, нет свойств, которые нужно анимировать, а анимация не будет выполнена. Кроме того, если имя анимации не равно , то анимации не будет.Это можно использовать для переопределения любых анимаций , следующих из каскада. Если несколько анимаций , пытающихся изменить одно и то же свойство, то анимация, ближайшая к , заканчивается конец списка имен. Каждая анимация, указанная по имени , должна иметь соответствующее значение для других свойств анимации , перечисленных ниже. Если списки значений для другой анимации не имеют одинаковой длины, длина списка анимационных имен определяет количество элементов в каждом списке , которые были рассмотрены при запуске анимации. Списки сопоставляются с первым значением : избыточные значения в конце не используются. Если у одного из других свойств не хватает значений, разделенных запятыми, чтобы соответствовать количеству значений имени анимации, UA должен вычислить свое значение , повторив список значений до тех пор, пока их не будет достаточно. Это усечение или повторение не влияет на вычисленное значение. Примечание: Это аналогично поведению свойств фона - *, с фоном-изображением, аналогичным анимационному имени.

https://drafts.csswg.org/css-animations/#animation-name