【发布时间】：2019-05-05 16:35:43
【问题描述】：
我制作了一只需要飞行的 SVG 蜜蜂。我已成功使用 JavaScript 动态更改 CSS #bee1 中的变量 --tranX 和 --tranY（用于更改其位置）。
这些变量被传递到 CSS 中的 100% {} 关键帧。但是，动画不起作用。
注意：我已经成功地通过应用transform 让蜜蜂移动，但是蜜蜂只会在没有动画的情况下从一个位置跳到另一个位置。
蜜蜂的 CSS：
#bee1 {
-webkit-animation: beeMove 500ms ease-in-out infinite alternate-reverse both;
animation: beeMove 500ms ease-in-out infinite alternate-reverse both;
--tranX: 0;
--tranY: 0;
}
@-webkit-keyframes beeMove {
0% {
-webkit-transform: translateX(0) translateY(0);
transform: translateX(0) translateY(0);
}
100% {
-webkit-transform: translateX(var(--tranX)) translateY(var(--tranY));
transform: translateX(var(--tranX)) translateY(var(--tranY));
}
}
用于移动蜜蜂的 JavaScript（每秒调用一次）： 对于
(let bee of bees) {
bee.style.setProperty('--tranX', Math.random() * 340 + "px");
bee.style.setProperty('--tranY', Math.random() * 257 + "px");
}
【问题讨论】：
-
您的问题是
tranX和tranY的范围是#bee1选择器，但您也在beeMove动画定义中使用它，它超出了范围，因此tranX和tranY的值未定义。 -
嗯，但这适用于
.front-wing和.back-wing！ @特里
标签： javascript css animation svg css-animations