CSS关键帧动画无法在Chrome中使用

时间:2015-08-02 05:28:22

标签: css google-chrome css-animations css-transforms

我在背景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);
            }   
            }

0 个答案:

没有答案