我正在使用CSS translate在屏幕上放置一个DIV元素.这样可以正常工作,但是当相同的元素稍后移位时,原始位移将被丢弃.
使用javascript设置CSS开始位置
div.style.transform ="translate(800px, 400px)";
在使用javascript随机设置起始位置后,CSS动画只会将其重置.
CSS动画
@keyframes testanimation {
0% {
transform: translateY(20px);
}
100% {
transform: translateY(80px);
}
}
如何组合CSS翻译,将以前的位移考虑在内?在这种情况下,目标是让动画从随机位置开始. 20px – 80px应该是相对的.
最佳答案 我想这样做的最佳方法是获取先前的变换,向这些值添加内容然后应用新变换.
另一个建议是使用position,left和top设置元素的位置.使用以下代码作为示例:
div.style.position = "absolute";
div.style.left = "800px";
div.style.top = "400px";
这样,变换将应用于该位置,而不是相对于您之前的变换.