我在背景div上设置了一个css关键帧动画,其中包括大量的3D变换,不透明度,颜色等等。几个月前,动画在Chrome中运行得非常好,但是并没有#39现在似乎工作了。它在Safari中仍然很好用。
与以下问题相关的基本代码; full code/live site here; *请注意,转换也会因鼠标移动而超车(这在Chrome + Safari中运行良好)。
Sry,请不要因为我的大便和性感时间命名惯例而讨厌我;)
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);
}
}