CSS анимировать пользовательские свойства / переменные - PullRequest
Новая
       32

CSS анимировать пользовательские свойства / переменные

0 голосов
/ 03 июня 2018

Я пытался заставить это работать некоторое время.

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

В этом примере я пытаюсь архивировать то, что внутренний div в основном просто мигает с помощью переменной.Но мой результат в Firefox - просто черный ящик.

Я что-то упустил?Я уже посмотрел, можно ли даже использовать CSS-переменные в @keyframes, и, конечно, вы можете.Единственная проблема с ними в анимации, кажется, заключается в том, что они не интерполируются между ними, а что они внезапно переключаются, что не является проблемой в этом случае. 

@keyframes test{
    from{
        --one: 0;
    }
    to{
        --one: 1;
    }
}

#test{
    width: 100px;
    height: 200px;
    background-color: black;
    animation: test 1s infinite;
}
#test :nth-child(1){
    width: 20px;
    height: 20px;
    margin: auto;
    background-color: white;
    opacity: var(--one,0);
}
<div id="test">
    <div></div>
</div>

1 Ответ

0 голосов
/ 03 июня 2018

Как указано в спецификации :

Примечательно, что они могут даже быть переведены или анимированы , но, поскольку UA не имеет никакого способачтобы интерпретировать их содержимое , они всегда используют поведение «переворачивается на 50%», которое используется для любой другой пары значений, которые не могут быть интеллектуально интерполированы.Однако любое пользовательское свойство , используемое в правиле @ keyframes, становится испорченным анимацией , что влияет на то, как оно обрабатывается при обращении через функцию var () в свойстве animation.

Так что даже если вы используете opacity с var() в ключевых кадрах, он не будет анимирован: 

@keyframes test {
  from {
    --one:0;
    opacity: var(--one);
  }
  to {
    opacity: var(--one);
    --one: 1;
  }
}

#test {
  width: 100px;
  height: 200px;
  background-color: black;
}

#test :nth-child(1) {
  width: 20px;
  height: 20px;
  margin: auto;
  background-color: white;
  animation: test 1s  infinite;
  
}
<div id="test">
  <div></div>
</div>

Кстати, вы можете заставить его работать, если вы используете его как transition, потому что в этом случае вы будете применять переход к непрозрачности, а не кПользовательское свойство: 

#test {
  width: 100px;
  height: 200px;
  background-color: black;
}

#test:hover {
  --one:1;
}

#test :nth-child(1) {
  width: 20px;
  height: 20px;
  margin: auto;
  background-color: white;
  opacity: var(--one,0);
  transition:1s all;
}
<div id="test">
  <div></div>
</div>
...