CSS Keyframe Animation Not Working in Chrome - css

Question

I've got an css keyframe animation set on a background div with a lot of going on—3d transformations, opacity, color, etc. The animation worked perfectly fine in Chrome a couple months ago, but doesn't seem to work now. It still works great in Safari.
Essential code related to the problem below; full code/live site here; *note that the transformation is overtaking by mouse movement as well(this works fine in Chrome + Safari).
Sry, please don't hate me for my poop and sexytime naming conventions ;)
HTML
<div class="background-container" id="poop">
<div class="background-movement">
</div>
</div>
<script>
var element = document.getElementById('poop');
document.addEventListener('mousemove', function (e) {
var transform = 'rotateX('+e.pageY*.05+'deg) rotateY('+e.pageX*.02+'deg)';
element.style.webkitTransform = transform;
element.style.transform = transform;
}, false);
</script>
CSS
.background-container {
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
}
.background-movement {
background-image: url(../img/bg.png);
z-index: 100;
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background-repeat: repeat;
background-size: 500px;
-webkit-animation: sexytime 60s ease-in-out 0 infinite alternate;
animation: sexytime 60s ease-in-out 0 infinite alternate;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
#-webkit-keyframes sexytime {
0% {
opacity: 1;
-webkit-filter: hue-rotate(0deg) brightness(.8);
-webkit-transform-origin: left;
-webkit-transform:scale(1) rotate3d(10, 0, 0, 20deg);
}
20%{
-webkit-transform:scale(1.3) rotate3d(20, 30, -10, 40deg);
}
40% {
opacity: .9;
-webkit-filter: hue-rotate(60deg) brightness(1);
}
50% {
opacity: .8;
-webkit-filter: hue-rotate(300deg) brightness(1.3);
-webkit-transform-origin: top;
-webkit-transform:scale(1.3) rotate3d(70, 10, 30, -10deg);
}
60% {
opacity: 1;
-webkit-transform:scale(1.3) rotate3d(10, -40, 0, 30deg);
}
80% {
opacity: .9;
-webkit-filter: hue-rotate(-30deg) brightness(1.3);
-webkit-transform:scale(1.3) rotate3d(20, 30, -20, 30deg);
}
100% {
opacity: 1;
-webkit-filter:hue-rotate(120deg) brightness(1);
-webkit-transform-origin: bottom;
-webkit-transform:scale(.9) rotate3d(30, -10, 50, 20deg);
}
}
#keyframes sexytime {
0% {
opacity: 1;
filter: hue-rotate(0deg) brightness(.8);
transform-origin: left;
transform:scale(1) rotate3d(10, 0, 0, 20deg);
}
20%{
transform:scale(1.3) rotate3d(20, 30, -10, 40deg);
}
40% {
opacity: .9;
filter: hue-rotate(60deg) brightness(1);
}
50% {
opacity: .8;
filter: hue-rotate(300deg) brightness(1.3);
transform-origin: top;
transform:scale(1.3) rotate3d(70, 10, 30, -10deg);
}
60% {
opacity: 1;
transform:scale(1.3) rotate3d(10, -40, 0, 30deg);
}
80% {
opacity: .9;
filter: hue-rotate(-30deg) brightness(1.3);
transform:scale(1.3) rotate3d(20, 30, -20, 30deg);
}
100% {
opacity: 1;
filter:hue-rotate(120deg) brightness(1);
transform-origin: bottom;
transform:scale(.9) rotate3d(30, -10, 50, 20deg);
}
}