Javascript 为什么我的动画突然结束了？

我对这一点还不太熟悉，在学习一个基本教程之后，我用gsap创建了一个轻巧的文本效果，我注意到当我暂停鼠标光标时，有一个非常刺耳的移动，文本突然朝着光标射出。我不知道是什么原因造成的，不知道是否有人能告诉我为什么会这样

document.addEventListener（“mousemove”，e=>{
gsap.to（“.标题”{
x:e.clientX，
y:e.clientY，
错开：-.02，
})
})

正文{
背景:#111111；
}
.头衔{
字体系列：Helvetica；
字体大小：12vw；
字号：600；
-webkit文本笔划：2个rgb（238238238238）；
颜色：#111111；
过渡：所有100毫秒都容易进入；
用户选择：无；
框大小：边框框；
指针事件：无；
位置：绝对位置；
转换：翻译（-50%，-50%）；
显示：块；
}
#标题容器{
宽度：100vw；
高度：100vh；
}

Def（x）
Def（x）
Def（x）
Def（x）
Def（x）

问题是您有

转换

css属性，您不需要它，它与

gsap

的操作相冲突。只要评论或删除它，你就可以开始了

document.addEventListener（“mousemove”，e=>{
gsap.to（“.标题”{
x:e.clientX，
y:e.clientY，
错开：-.02，
})
})

正文{
背景:#111111；
}
.头衔{
字体系列：Helvetica；
字体大小：12vw；
字号：600；
-webkit文本笔划：2个rgb（238238238238）；
颜色：#111111；
/*过渡：所有100毫秒都容易进入*/
用户选择：无；
框大小：边框框；
指针事件：无；
位置：绝对位置；
转换：翻译（-50%，-50%）；
显示：块；
}
#标题容器{
宽度：100vw；
高度：100vh；
}

Def（x）
Def（x）
Def（x）
Def（x）
Def（x）

问题是您有

转换

css属性，您不需要它，它与

gsap

的操作相冲突。只要评论或删除它，你就可以开始了

document.addEventListener（“mousemove”，e=>{
gsap.to（“.标题”{
x:e.clientX，
y:e.clientY，
错开：-.02，
})
})

正文{
背景:#111111；
}
.头衔{
字体系列：Helvetica；
字体大小：12vw；
字号：600；
-webkit文本笔划：2个rgb（238238238238）；
颜色：#111111；
/*过渡：所有100毫秒都容易进入*/
用户选择：无；
框大小：边框框；
指针事件：无；
位置：绝对位置；
转换：翻译（-50%，-50%）；
显示：块；
}
#标题容器{
宽度：100vw；
高度：100vh；
}

Def（x）
Def（x）
Def（x）
Def（x）
Def（x）

如果您想减慢动画，请更改

过渡：所有100毫秒的缓进到<代码>的转换：所有500毫秒的时间都很轻松

或CSS中更高的ms值。我强烈建议您阅读，因为您正在制作其中一个：）如上所述，我们GreenSock建议您使用GSAP设置动画元素上的所有变换。如果您想减慢动画，请更改

过渡：所有100毫秒到<代码>的转换：所有500毫秒的时间都很轻松

或CSS中更高的ms值。我强烈建议您阅读，因为您正在制作其中一个：）如所述，GreenSock建议您使用GSAP在动画元素上设置所有变换。对于理解什么突然结束会产生不和谐，这做得很好means@LawrenceCherone我的坏xd我是这么想的。很好地理解了什么突然结束做得不和谐means@LawrenceCherone我的坏xd我是认真的。