Javascript Webkit动画干扰jQuery函数

我使用jQuery函数来处理div中的视差背景

当页面加载时，我有一些csswebkit动画来设置背景动画

但是，在页面完成加载后，我的jQuery函数（在背景上设置视差效果的动画）就不起作用了

以下是我的代码：

$（文档）.ready（函数（）{
$（'#square'）.mousemove（函数（e）{
var x=-（e.pageX+this.offsetLeft）/4；
变量y=-（e.pageY+this.offsetTop）/4；
$（this.css（'background-position'，x+'px'+y+'px'）；
});
});
#正方形{高度：700px；
宽度：500px；
显示：内联块；
左边距：100px；
位置：绝对位置；
右：37%；
最高：15%；
背景：透明；
-webkit动画名称：图像fadein；
-webkit动画延迟：.8s；
-webkit动画持续时间：1s；
-webkit动画迭代计数：1；
-webkit动画计时功能：轻松输入输出；
-webkit动画填充模式：正向；
@-webkit关键帧图像fadein{
0%{背景：透明；}
25%{背景：#f2efeff；}
50%{背景：#333；}
100%{背景图像：url(https://destinyguides.files.wordpress.com/2014/08/destiny-wallpaper-3.jpg);
背景尺寸：封面无重复；
背景位置：35%30%；}
}
这是因为使用关键帧规则设置动画的属性不能被内联css规则覆盖，或者至少不能被我测试过的任何方法覆盖

你可以

将动画样式移动到类中
将类添加到元素中
添加animationend侦听器以侦听动画的结尾
在动画结束时，删除动画类并重置背景图像和其他样式

$（文档）.ready（函数（）{
$（'#square'）.mousemove（函数（e）{
var x=-（e.pageX+this.offsetLeft）/4；
变量y=-（e.pageY+this.offsetTop）/4；
$（this.css（“背景位置”，x+'px'+y+'px'）；
}).on（“动画结束”，函数（e）{
//可以通过以下方式访问动画名称值：
//e、 originalEvent.animationName
$（this.removeClass（“动画”）.css({
背景图片：“url(https://destinyguides.files.wordpress.com/2014/08/destiny-wallpaper-3.jpg)",
背景尺寸：“封面不得重复”，
背景位置：“35%30%”
});
});
})；
#square{
宽度：80%；
身高：100%；
位置：绝对位置；
顶部：0px；
左：0px；
背景：透明；
}
.动画{
-webkit动画名称：图像fadein；
-webkit动画延迟：.8s；
-webkit动画持续时间：1s；
-webkit动画迭代计数：1；
-webkit动画计时功能：轻松输入输出；
-webkit动画填充模式：正向；
}
@-webkit关键帧图像fadein{
0%{背景：透明；}
25%{背景：#f2efeff；}
50%{背景：#333；}
100%{背景图像：url(https://destinyguides.files.wordpress.com/2014/08/destiny-wallpaper-3.jpg);
背景尺寸：封面无重复；
背景位置：35%30%；}
}

非常感谢Patrick！这样做了，今天学到了一些关于内联css规则的新知识。很荣幸！：）是否有针对某个特定动画的animationend的方法？@PrincetonCollins，是的，如果将事件参数添加到回调函数：
“animationend”，函数（e）{
您可以访问animationName属性以查看动画的名称。
e.animationName
使用非jQuery添加的事件侦听器时，
e.originalEvent.animationName
通过jQuery创建侦听器时（如我的答案中的示例）