Почему я не могу анимировать пользовательские свойства (иначе переменные CSS)? - PullRequest
Новая
       25

Почему я не могу анимировать пользовательские свойства (иначе переменные CSS)?

0 голосов
/ 08 февраля 2019

См. Эту анимацию:

  • У золотого элемента div есть анимация, в которой анимируется пользовательское свойство
    (@keyframes roll-o-1 анимация --o).
    Эта анимация выполняется по шагам.
  • У серебряного div есть анимация, в которой анимируется свойство normal
    (@keyframes roll-o-2 оживляет left).
    Это анимируется непрерывно.

Почему золотой div не анимируется плавно?
Есть ли обходной путь, который также использует переменные? 

#one {
  width: 50px;
  height: 50px;
  background-color: gold;
  --o: 0;
  animation: roll-o-1 2s infinite alternate ease-in-out both;
  position: relative;
  left: calc(var(--o) * 1px);
}

@keyframes roll-o-1 {
  0% {
    --o: 0;
  }
  50% {
    --o: 50;
  }
  100% {
    --o: 100;
  }
}

#two {
  width: 50px;
  height: 50px;
  background-color: silver;
  --o: 0;
  animation: roll-o-2 2s infinite alternate ease-in-out both;
  position: relative;
}

@keyframes roll-o-2 {
  0% {
    left: 0px;
  }
  50% {
    left: 50px;
  }
  100% {
    left: 100px;
  }
}
<div id="one"></div>
<br>
<div id="two"></div>

Ответы [ 2 ]

0 голосов
/ 08 февраля 2019

От спецификации :

Анимация: нет

Тогда

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

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

Обратите внимание на разницу в приведенных ниже примерах, где мы можем думать, что обе анимации одинаковы, но нет,Браузер знает, как анимировать left, но не знает, как анимировать пользовательское свойство, используемое left (которое также можно использовать где угодно) 

#one {
  width: 50px;
  height: 50px;
  background-color: gold;
  animation: roll-o-1 2s infinite alternate ease-in-out both;
  position: relative;
  left: calc(var(--o) * 1px);
}

@keyframes roll-o-1 {
  0% {
    --o: 0;
  }
  50% {
    --o: 50;
  }
  100% {
    --o: 100;
  }
}

#two {
  width: 50px;
  height: 50px;
  background-color: silver;
  --o: 1;
  animation: roll-o-2 2s infinite alternate ease-in-out both;
  position: relative;
}

@keyframes roll-o-2 {
  0% {
    left: calc(var(--o) * 1px);
  }
  50% {
    left: calc(var(--o) * 50px);
  }
  100% {
    left: calc(var(--o) * 100px);
  }
}
<div id="one"></div>
<br>
<div id="two"></div>

Другой пример использования перехода: 

.box {
  --c:red;
  background:var(--c);
  height:200px;
  transition:1s;
}
.box:hover {
  --c:blue;
}
<div class="box"></div>

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

Для анимации, даже если вы определите свойство leftв ключевых кадрах у вас не будет анимации из-за испорченной анимации , описанной выше: 

#one {
  width: 50px;
  height: 50px;
  background-color: gold;
  animation: roll-o-1 2s infinite alternate ease-in-out both;
  position: relative;
  left: calc(var(--o) * 1px);
}

@keyframes roll-o-1 {
  0% {
    --o: 0;
     left: calc(var(--o) * 1px);
  }
  50% {
    --o: 50;
     left: calc(var(--o) * 1px);
  }
  100% {
    --o: 100;
    left: calc(var(--o) * 1px);
  }
}

#two {
  width: 50px;
  height: 50px;
  background-color: silver;
  --o: 1;
  animation: roll-o-2 2s infinite alternate ease-in-out both;
  position: relative;
}

@keyframes roll-o-2 {
  0% {
    left: calc(var(--o) * 1px);
  }
  50% {
    left: calc(var(--o) * 50px);
  }
  100% {
    left: calc(var(--o) * 100px);
  }
}
<div id="one"></div>
<br>
<div id="two"></div>
0 голосов
/ 08 февраля 2019

Не все свойства CSS являются анимируемыми, и вы не можете анимировать переменные CSS.Это список свойств, которые вы можете анимировать https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties

...