CSS анимация пользовательских свойств / переменных
Я пытался заставить это работать какое-то время.
Дело в том, что внутренний div будет иметь некоторую форму и, вероятно, их будет больше одного (вот почему я использовал селектор nth-child).
Этот внутренний div должен быть показан, а затем снова скрыт как в течение некоторого установленного времени.
проблема в том, что я хотел бы анимировать все (позже) несколько внутренних 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>
Ответы 2
Как указано в Технические характеристики:
Animatable: no
а также
Notably, they can even be transitioned or animated, but since the UA has no way to interpret their contents, they always use the "flips at 50%" behavior that is used for any other pair of values that can’t be intelligently interpolated. However, any custom property used in a@keyframes rule becomes animation-tainted, which affects how it is treated when referred to via the var() function in an animation property.
Таким образом, даже если вы используете 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>@ Johann150, если честно, испорченная анимация также сбивает с толку e :) Я много искал это, так как я тоже хочу иметь возможность анимировать настраиваемое свойство, но после долгих исследований это был единственный раздел спецификации, в котором я обнаружил, что это не так. возможно при использовании внутренних ключевых кадров. Кстати, давайте подождем, может быть, вы получите еще ответы;)
Столкнувшись с связанный вопрос, и если я правильно прочитал цитируемый текст и спецификации, вещь animation-tainted применима только к значению var() при использовании в свойстве animation, это не должно влиять на значения в @keyframes, даже если наличие его в @keyframes является что делает его испорченным для animation. Вот где это используется. (Может быть, это обходной путь для того, что могло быть источником бесконечного цикла?). Обратите внимание, что ваш первый пример отлично работает в Firefox.
@Kaiido эта проблема не может быть в этой области, потому что вы не анимируете какие-либо свойства Custom, но вы анимируете rotate (). В этом случае нет искаженной анимации. Даже если вы используете var() внутри animation, также отсутствует искаженное анимацией поведение. В спецификации указано Однако любое настраиваемое свойство, используемое в правиле @keyframes, становится искаженным анимацией. -> это означает, что используется как --c:1, а не как property:var(-c). Последний в порядке.
Я не имел в виду, что «связанный вопрос» был таким же, только связанный и чтобы дать представление о том, почему я пришел сюда (другое несоответствие между браузерами). Я хочу сказать, что «Так что, даже если вы используете непрозрачность с var () в ключевых кадрах, она не будет анимироваться» неверно или, по крайней мере, не подразумевается предыдущей цитатой. В цитате только сказано, что если бы вы сделали --foo: 2s; animation: anim-name var(--foo) infinite; } @keyframes anim-name { from { --foo: 0s } to { --foo: 15s } }, то значение, используемое в animation: anim-name var(--foo) infinite; }, осталось бы 2s. Это не говорит о том, что opacity не должен использовать обновленное значение.
В спецификациях написано "который влияет на то, как он обрабатывается, когда упоминается через функцию var () в свойстве animation", нигде больше нет. (на самом деле с тех пор я нашел Эта проблема, где сказано, что display также затрагивается "при некоторых условиях", и что все non-animatable будут.
Итак, ваше недоразумение заключается в том, что вы думали, что «становится зараженным анимацией» означает, что его значение каким-то образом заблокировано в контексте @keyframes, в то время как на самом деле происходит то, что когда этот флаг установлен, он блокирует только алгоритм заменить вар, только для animation собственности. Первый также подходит для спецификаций.
@Kaiido Я хочу сказать, что «Даже если вы используете непрозрачность с помощью var () в ключевых кадрах, она не будет анимироваться» неверно, -> это правда, учитывая первое объяснение, где написано UA не может интерпретировать их содержимое. Я использую эту часть, чтобы объяснить, почему у них не может быть перехода и анимации (и того, и другого). Я сказал, что в другом вопросе нет одушевленный, потому что вы не используете какое-либо настраиваемое свойство внутри ключевых кадров, поэтому это предложение не применимо в вашем случае.
@Kaiido мы не можем анимировать / переходить пользовательское свойство, потому что борзеру трудно понять их содержимое (целое число, число с плавающей запятой, строка и т. д.). Загрязненная анимацией вещь - это дополнительный вывод, если вы используете настраиваемое свойство внутри ключевых кадров.
@Temani, нет и нет :-), вы можете очень хорошо анимировать пользовательские свойства в ключевом кадре, он просто будет использовать «переворачивание на 50%». Вещь, испорченная анимацией, предназначена не для случая, когда настраиваемое свойство используется в ключевом кадре, а для случая, когда оно используется в animation-, и скоро будет, когда оно будет использоваться в неанимируемом свойстве. Контекст @keyframes - это как раз то, что вызывает заражение настраиваемого свойства, но ни в одном из ваших примеров это настраиваемое свойство не используется в правиле animation-, поэтому даже если это испорченный анимацией, оно вообще не влияет на ваш код. Ваш первый фрагмент и OP должны анимироваться.
@Kaiido: в спецификации четко указано animatable: No (w3.org/TR/css-variables-1/#defining-variables), поэтому они не предназначены для анимации (по крайней мере, в текущей спецификации). Браузер может решить сделать это по-другому в некоторых случаях, но это Нет, если вам не повезло найти рабочий пример. Что касается испорченной анимации, это другая история, и я сказал, что это выходит за рамки, потому что в ваших ключевых кадрах нет --c:something (это то, что я назвал используется в ключевых кадрах). Я не использую его для объяснения того, что не связано с анимацией (вероятно, я не использую хороший английский, чтобы хорошо это объяснить)
Еще раз я никогда не говорил, что связанный с этим вопрос был одним и тем же. Вы не понимаете, как работает флаг animation-tainted , и поэтому я пытаюсь объяснить вам, что он не имеет ничего общего в вашем ответе. Тот факт, что пользовательская переменная не может быть анимирована, означает только то, что она будет иметь поведение «переворачивается на 50%». Даже ваша цитата ясно говорит: "Примечательно, что их можно даже перемещать или анимировать."
Это может быть достигнуто путем определения переменных с помощью (на момент написания этого, плохо поддерживаемого) @property, который позволяет объявлять типы и позволяет браузеру «понять», например, что определенное свойство (переменная) является Число, а затем он может постепенно анимировать / изменять эту переменную.
Пример кода:
@property --opacity {
syntax: '<number>'; /* <- defined as type number for the transition to work */
initial-value: 0;
inherits: false;
}
@keyframes fadeIn {
50%{ --opacity: 1 }
}
html{
animation: 2s fadeIn infinite; /* "forwards pesists the last keyframe styles */
background: rgba(0 0 0 / var(--opacity));
}К текущим разрешенным типам относятся:
lengthnumberpercentagelength-percentagecolorimageurlintegerangletimeresolutiontransform-listtransform-functioncustom-ident(строка настраиваемого идентификатора)
Полезные статьи:
- https://web.dev/at-property/#writing-houdini-custom-properties
- https://css-tricks.com/using-property-for-css-custom-properties
- Классные демоверсии Houdini
круто, ищу это и не находишь ссылку на MDN
Я думал, что здесь подойдет используйте поведение «переворачивает на 50%». Почему нет? Потому что, как я уже сказал, в данном случае это было бы прекрасно. Может я не правильно понимаю испорченная анимация.