我有一个CSS动画关键帧:
@keyframes first-movement {
0%, 100% {
opacity: 0;
transform: scale(0) rotate(0deg);
}
20%, 99% {
opacity: 1;
transform: scale(1) rotate(180deg);
}
}
当我通常使用它时,一切正常
rect {
animation-name: first-movement;
animation-timing-function: linear;
animation-duration: 8s;
animation-iteration-count: infinite;
transform-origin: 40px 40px;
}
但是当我尝试作为CSS var发送时,它不起作用
rect {
animation-name: var(--main-animation);
animation-timing-function: linear;
animation-duration: 8s;
animation-iteration-count: infinite;
transform-origin: 40px 40px;
}
这是我可以分配var的方式,
#load-area > use:nth-child(1) {
--main-animation: first-movement;
}
它不会抛出错误或进行任何线索调查,这是哪个错误?
更新: 我添加了完整的代码,删除标记的行以破坏它。
正如我所提到的,我使用animation-duration
来做到这一点,并且效果很好,但是计算时间更加复杂,而是在必要的时机创建新的关键帧(我有五个关键帧)。
更新2: 这是一个Chrome BUG,该代码可在Firefox上完美运行
@keyframes first {
0%, 100% {
opacity: 0;
transform: scale(0) rotate(0deg);
}
20%, 99% {
opacity: 1;
transform: scale(1) rotate(180deg);
}
}
@keyframes second {
0%, 20%, 100% {
opacity: 0;
transform: scale(0) rotate(0deg);
}
40%, 99% {
opacity: 1;
transform: scale(1) rotate(180deg);
}
}
#circle,
#cross,
#square,
#triangle {
opacity: 0;
}
rect {
animation-name: var(--main-animation);
animation-timing-function: linear;
animation-duration: 8s;
animation-iteration-count: infinite;
transform-origin: 40px 40px;
}
#load-area > use:nth-child(1) {
--main-animation: first;
}
#load-area > use:nth-child(1) {
--main-animation: second;
}
<div style="background-color: aliceblue">
<svg viewBox="-20 -20 600 200" id="main">
<defs id="test">
<rect width="80" height="80" id="circle" fill="red" />
<rect width="80" height="80" id="square" fill="pink" />
<rect width="80" height="80" id="cross" fill="blue" />
<rect width="80" height="80" id="triangle" fill="green" />
</defs>
<g id="load-area">
<use x="0" xlink:href="#circle" />
<use x="100" xlink:href="#square" />
<use x="200" xlink:href="#cross" />
<use x="300" xlink:href="#triangle" />
</g>
</svg>
</div>