Javascript CSS动画无法与其他CSS+；JS动画中的相同代码

我的文字上写着“查看我的作品”，当用户浏览时，它会从黑色变为紫色。然而，无论我为过渡设置了什么时间，它的时间都非常慢：背景位置#ms ease。我从这里改编了这段代码：

这是我使用它的网站：

h4{
字体系列：“Rubik”，无衬线；
溢出x：隐藏；
颜色：#000；
字体大小：24px；
字号：600；
垫底：70px；
左侧填充：30px；
文字装饰：无；
}
h4 a{
位置：相对位置；
显示：内联块；
颜色：#7500FF；
溢出：隐藏；
背景：线性梯度（向右，#000，#000 50%，#7500FF 50%）；
背景剪辑：文本；
-webkit背景剪辑：文本；
-webkit文本填充颜色：透明；
背景大小：200%100%；
背景位置：100%；
过渡：背景位置5毫秒；
文字装饰：无；
}
a:悬停{
背景位置：0.100%；
}
动画{
位置：绝对位置；
底部：50px；
宽度：0px；
高度：0px；
左边框：20px实心透明；
右边框：20px实心透明；
边框顶部：30px实心#7500FF；
动画持续时间：2.5s；
动画迭代次数：无限；
}
标题跨度：：之前，
标题span:：after{
位置：绝对位置；
内容：“；
高度：0px；
宽度：0px；
}
span：：之前{
左：-10px；
-webkit变换：旋转（-45度）；
-moz变换：旋转（-45度）；
-ms变换：旋转（-45度）；
-o变换：旋转（-45度）；
变换：旋转（-45度）；
}
span：：之后{
右：-10px；
-webkit变换：旋转（45度）；
-moz变换：旋转（45度）；
-ms变换：旋转（45度）；
-o变换：旋转（45度）；
变换：旋转（45度）；
}
//滚动功能由Scott Dowding提供；http://stackoverflow.com/questions/487073/check-if-element-is-visible-after-scrolling
$（文档）.ready（函数（）{
//检查元素是否滚动到视图中
函数IsCrolledinToView（elem）{
var docViewTop=$（window.scrollTop（）；
var docViewBottom=docViewTop+$（window）.height（）；
var elemTop=$（elem）.offset（）.top；
var elemBottom=elemTop+$（elem）.height（）；
返回elemBottom=docViewTop；
}
//若元素滚动到视图中，则淡入淡入
$（窗口）。滚动（函数（）{
$（“.scroll animations.animated”）。每个（函数（）{
if（isScrolledIntoView（此）==true）{
$（this.addClass（“fadeInLeft”）；
}
});
});
//单击动画
$（“按钮”）。在（“单击”，函数（）{
/*
如果任何输入为空，则将其边框设为红色并抖动。动画完成后，删除抖动和动画类，以便动画可以重复。
*/
//检查名称输入
if（$（“#name”）.val（）=“”）{
$（“名称”）
.addClass（“表单错误”）
.一(
“webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend”，
函数（）{
$（此）.removeClass（“动画抖动”）；
}
);
}否则{
$（“#name”）.removeClass（“表单错误”）；
}
//检查电子邮件输入
如果（$（“#电子邮件”）.val（）=“”）{
$（“电子邮件”）
.addClass（“表单错误”）
.一(
“webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend”，
函数（）{
$（此）.removeClass（“动画抖动”）；
}
);
}否则{
$（“#email”）.removeClass（“表单错误”）；
}
//检查消息文本区域
如果（$（“#消息”）.val（）=“”）{
$（“消息”）
.addClass（“表单错误”）
.一(
“webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend”，
函数（）{
$（此）.removeClass（“动画抖动”）；
}
);
}否则{
$（“#消息”）.removeClass（“表单错误”）；
}
});
});

您的a标记具有动画。过渡对动画不起作用，因为动画有自己的持续时间

把这个15秒换成你想要的

a{
    animation: move 15s linear infinite;
    -webkit-animation: move 15s linear infinite;
}

---

但是如果我想在悬停时改变颜色，我不使用过渡吗？对于原始代码，它就是这样做的，但是它非常慢。在你的代码中，颜色在无限循环中改变，但速度没有改变。你知道我搞砸了什么吗？在discord，Programmer#5603或telegram@Designer 1995中联系我，这样它在今天的原始代码中就可以正常工作了。也许是空间问题？谢谢你的帮助！