Как задать универсальный @keyframes для нескольких разных блоков, без скриптов?

Question

[Sviaznoi]

Допустим, что у нас есть два блока разных по высоте и ширине. Я хочу написать однотипную многоступенчатую анимацию через animation/@keyframes. Анимация будет для блоков по факту идентичной, а именно увеличение в ширену на 10% и на 15% в высоту. То есть изменения размеров по пропорциям в зависимости от размеров блока. Вопрос в том можно ли в css написать универсальный @keyframes для обоих блоков? Или для каждого писать отдельный @keyframes? Например (если бы так можно было бы) вот так как на в следующем неправильном коде:

50%{
        width: calc(width / 1.2);
        height: calc(height * 1.2);
    }

Comments

[Kentavr16]

так вроде в блоке указываешь какую анимацию использовать. В чем проблема указать ту же для нескольких блоков?

[Sviaznoi]

Высота и ширина у блоков разные.

[Ankhena]

Sviaznoi, если вы замените свои width и height внутри calc на здоровые кастомные свойства, то и получите то, что хотите.

Другой вопрос, как бы всё это не развалилось при фиксированных значениях, но это вопрос задолго до анимаций.

Альтернатива это менять scale, а не размеры.

Answer 1

[Ivan Bogachev]

С точки зрения производительности в CSS анимациях почти всегда имеет смысл сразу смотреть на свойство transform, а не на width или height. А в терминах трансформаций у нас для изменения размеров используются вариации функции scale():

50% {
    transform: scaleX(0.9) scaleY(1.1);
}

Если у вас действительно логика завязана на проценты от изначального размера, то это именно то, что доктор прописал, и не нужно ничего дополнительно придумывать.

Comments

[serega danet]

ходят слухи, что transform: уже погибла, осталась только scale()

[Ivan Bogachev]

serega danet, да никто не погиб, просто с недавних пор появился еще один способ описать то же самое, только сбоку. Теперь у нас есть scale(), scale3d(), scaleX(), scaleY(), scaleZ() и отдельное свойство scale, и они все под капотом формируют одну и ту же матрицу трансформаций.

[Александр]

serega danet, https://developer.mozilla.org/en-US/docs/Web/CSS/t... Вы об этом?

[Sviaznoi]

Работает! Благодарю!!!

[serega danet]

Александр, ну да :) Ходят слухи, с августа 2022 :)

[Александр]

serega danet, так это просто доп. свойства, не более. Свойства удалять не должны, иначе будет сломана обратная совместимость. Максимум - deprecated могут накинуть.