Могу ли я указать для CSS-анимации уже указанный блок CSS в качестве цели? - PullRequest
Новая
       4

Могу ли я указать для CSS-анимации уже указанный блок CSS в качестве цели?

0 голосов
/ 11 сентября 2018

В этом примере показана анимация, которая переходит от масштаба 100% к масштабу 70%: 

.shrink {
  animation-name: title-min;
  animation-duration: 1s;
  animation-iteration-count:infinite;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
  transform-origin: 0% 100% 0;
}

@keyframes title-min
{
  from { transform: scale(1); }
  to { transform: scale(.7); }
}
<body>
  <h1 class="shrink">
    Hello
  </h1>
</body>

Теперь transform - это просто свойство CSS, заключенное в блок для определения различных целей в последовательности анимации. Можно ли указать этот блок, внешний по отношению к блоку @keyframes, как некоторые с именем CSS Ruleset или At-rule и сослаться на него в блоке @keyfreames?

1 Ответ

0 голосов
/ 11 сентября 2018

К сожалению, это невозможно за пределами препроцессора.В CSS объявления свойств для изменения в анимации должны появляться в определенных правилах ключевых кадров в @keyframes at-rule.

Самое близкое, что вы можете получить, это абстрагировать значения в каждом ключевом кадре.к пользовательским свойствам вне правила @keyframes, а затем ссылаться на них внутри него с помощью var(), но сами свойства (такие как transform) все еще должны быть указаны внутри ключевого кадра.

...