Задать вопрос
@Sviaznoi

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

Допустим, что у нас есть два блока разных по высоте и ширине. Я хочу написать однотипную многоступенчатую анимацию через animation/@keyframes. Анимация будет для блоков по факту идентичной, а именно увеличение в ширену на 10% и на 15% в высоту. То есть изменения размеров по пропорциям в зависимости от размеров блока. Вопрос в том можно ли в css написать универсальный @keyframes для обоих блоков? Или для каждого писать отдельный @keyframes? Например (если бы так можно было бы) вот так как на в следующем неправильном коде:
50%{
        width: calc(width / 1.2);
        height: calc(height * 1.2);
    }
  • Вопрос задан
  • 91 просмотр
Подписаться 1 Простой 3 комментария
Решения вопроса 1
sfi0zy
@sfi0zy Куратор тега CSS
Creative frontend developer
С точки зрения производительности в CSS анимациях почти всегда имеет смысл сразу смотреть на свойство transform, а не на width или height. А в терминах трансформаций у нас для изменения размеров используются вариации функции scale():

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

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

Войдите, чтобы написать ответ

Похожие вопросы