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

Question

Амина

css

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

Как можно создать универсальную многоступенчатую анимацию через @keyframes в CSS для двух блоков с разными размерами, пропорционально увеличивая их ширину на 10% и высоту на 15%? Можно ли использовать одно @keyframes правило для обоих блоков или необходимо создавать отдельное правило для каждого блока? Например, можно ли в CSS создать такое универсальное правило, как в следующем неправильном примере кода: 50%{ width: calc(width / 1.2); height: calc(height * 1.2); }

30 апреля 2024 г. 13:10

Ответы на вопрос 2

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

Answer 1

Для создания общего @keyframes правила, которое можно применить к нескольким разным элементам, можно объявить анимацию с помощью @keyframes один раз, а затем вызывать эту анимацию для каждого элемента, указав нужные параметры.

Пример правильного использования @keyframes для универсальной анимации увеличения ширины на 10% и высоты на 15%:

```css
@keyframes scaleUp {
  50% {
    transform: scale(1.1, 1.15);
  }
}

.block1 {
  animation: scaleUp 1s infinite alternate;
}

.block2 {
  animation: scaleUp 1s infinite alternate;
}
```

В этом примере создается @keyframes с именем scaleUp, которое увеличивает размер элемента на 10% по ширине и 15% по высоте на 50% анимации. Затем это правило применяется к каждому нужному элементу, указывая длительность анимации (1s), повторение (infinite) и альтернативное выполнение (alternate).

Нельзя использовать выражения вроде `calc(width / 1.2)` и `calc(height * 1.2)` в @keyframes правилах в CSS. CSS не поддерживает арифметические операции в таком контексте. Вместо этого нужно указывать конечный размер элемента или использовать значения в процентах, как показано в примере выше.

Answer 2

С точки зрения производительности в CSS анимациях почти всегда имеет смысл сразу смотреть на свойство transform , а не на width или height . А в терминах трансформаций у нас для изменения размеров используются вариации функции scale() : 
 
 50% {
    transform: scaleX(0.9) scaleY(1.1);
}
 
 Если у вас действительно логика завязана на проценты от изначального размера, то это именно то, что доктор прописал, и не нужно ничего дополнительно придумывать.