Javascript css3动画在加载后不总是工作_Javascript_Jquery_Css_Transform

Javascript css3动画在加载后不总是工作

javascript jquery css

Javascript css3动画在加载后不总是工作,javascript,jquery,css,transform,Javascript,Jquery,Css,Transform,考虑以下代码： $(function() { $('#item').css({ webkitTransform: 'translate(100px, 100px)' }); }); @keyframes moving { from { -webkit-transform: translate(0, 0); -moz-transform: translate(0, 0);

考虑以下代码：

$(function() {
    $('#item').css({
        webkitTransform: 'translate(100px, 100px)' 
    });
});

    @keyframes moving {
        from {
            -webkit-transform: translate(0, 0);
            -moz-transform: translate(0, 0);
            -ms-transform: translate(0, 0);
            -o-transform: translate(0, 0);
            transform: translate(0, 0);
        }

        to {
            -webkit-transform: translate(100px, 100px);
            -moz-transform: translate(100px, 100px);
            -ms-transform: translate(100px, 100px);
            -o-transform: translate(100px, 100px);
            transform: translate(100px, 100px);
        }
     }

    @-moz-keyframes moving {
        from {
            -webkit-transform: translate(0, 0);
            -moz-transform: translate(0, 0);
            -ms-transform: translate(0, 0);
            -o-transform: translate(0, 0);
            transform: translate(0, 0);
        }

        to {
            -webkit-transform: translate(100px, 100px);
            -moz-transform: translate(100px, 100px);
            -ms-transform: translate(100px, 100px);
            -o-transform: translate(100px, 100px);
            transform: translate(100px, 100px);
        }
    }

    @-webkit-keyframes moving {
        from {
            -webkit-transform: translate(0, 0);
            -moz-transform: translate(0, 0);
            -ms-transform: translate(0, 0);
            -o-transform: translate(0, 0);
            transform: translate(0, 0);
        }

        to {
            -webkit-transform: translate(100px, 100px);
            -moz-transform: translate(100px, 100px);
            -ms-transform: translate(100px, 100px);
            -o-transform: translate(100px, 100px);
            transform: translate(100px, 100px);
        }
    }
    div#item {
        background-color:blue;
        height:20px;
        width:20px;
        -webkit-animation: moving 1s;
        -moz-animation: moving 1s;
        -ms-animation: moving 1s;
        -o-animation: moving 1s;
        animation: moving 1s;
    }
</style>

我尝试翻译的元素具有以下css：

transform: translate3d(0,0,0);
transition-duration: 1s;
transition-property: transform;

    @keyframes moving {
        from {
            -webkit-transform: translate(0, 0);
            -moz-transform: translate(0, 0);
            -ms-transform: translate(0, 0);
            -o-transform: translate(0, 0);
            transform: translate(0, 0);
        }

        to {
            -webkit-transform: translate(100px, 100px);
            -moz-transform: translate(100px, 100px);
            -ms-transform: translate(100px, 100px);
            -o-transform: translate(100px, 100px);
            transform: translate(100px, 100px);
        }
     }

    @-moz-keyframes moving {
        from {
            -webkit-transform: translate(0, 0);
            -moz-transform: translate(0, 0);
            -ms-transform: translate(0, 0);
            -o-transform: translate(0, 0);
            transform: translate(0, 0);
        }

        to {
            -webkit-transform: translate(100px, 100px);
            -moz-transform: translate(100px, 100px);
            -ms-transform: translate(100px, 100px);
            -o-transform: translate(100px, 100px);
            transform: translate(100px, 100px);
        }
    }

    @-webkit-keyframes moving {
        from {
            -webkit-transform: translate(0, 0);
            -moz-transform: translate(0, 0);
            -ms-transform: translate(0, 0);
            -o-transform: translate(0, 0);
            transform: translate(0, 0);
        }

        to {
            -webkit-transform: translate(100px, 100px);
            -moz-transform: translate(100px, 100px);
            -ms-transform: translate(100px, 100px);
            -o-transform: translate(100px, 100px);
            transform: translate(100px, 100px);
        }
    }
    div#item {
        background-color:blue;
        height:20px;
        width:20px;
        -webkit-animation: moving 1s;
        -moz-animation: moving 1s;
        -ms-animation: moving 1s;
        -o-animation: moving 1s;
        animation: moving 1s;
    }
</style>

所以我希望在1秒内有一个移动的元素。查看演示

    @keyframes moving {
        from {
            -webkit-transform: translate(0, 0);
            -moz-transform: translate(0, 0);
            -ms-transform: translate(0, 0);
            -o-transform: translate(0, 0);
            transform: translate(0, 0);
        }

        to {
            -webkit-transform: translate(100px, 100px);
            -moz-transform: translate(100px, 100px);
            -ms-transform: translate(100px, 100px);
            -o-transform: translate(100px, 100px);
            transform: translate(100px, 100px);
        }
     }

    @-moz-keyframes moving {
        from {
            -webkit-transform: translate(0, 0);
            -moz-transform: translate(0, 0);
            -ms-transform: translate(0, 0);
            -o-transform: translate(0, 0);
            transform: translate(0, 0);
        }

        to {
            -webkit-transform: translate(100px, 100px);
            -moz-transform: translate(100px, 100px);
            -ms-transform: translate(100px, 100px);
            -o-transform: translate(100px, 100px);
            transform: translate(100px, 100px);
        }
    }

    @-webkit-keyframes moving {
        from {
            -webkit-transform: translate(0, 0);
            -moz-transform: translate(0, 0);
            -ms-transform: translate(0, 0);
            -o-transform: translate(0, 0);
            transform: translate(0, 0);
        }

        to {
            -webkit-transform: translate(100px, 100px);
            -moz-transform: translate(100px, 100px);
            -ms-transform: translate(100px, 100px);
            -o-transform: translate(100px, 100px);
            transform: translate(100px, 100px);
        }
    }
    div#item {
        background-color:blue;
        height:20px;
        width:20px;
        -webkit-animation: moving 1s;
        -moz-animation: moving 1s;
        -ms-animation: moving 1s;
        -o-animation: moving 1s;
        animation: moving 1s;
    }
</style>

奇怪的是，动画有时发生，有时并不意味着它在100px，100px没有任何动画。所以问题是为什么它不总是有效，因为我在做任何事情之前都在等待onLoad？

尝试document.ready

$(document).ready(function()
   $('#item').css({"-webkit-transform":"translate(100px,100px)"}); 
});

    @keyframes moving {
        from {
            -webkit-transform: translate(0, 0);
            -moz-transform: translate(0, 0);
            -ms-transform: translate(0, 0);
            -o-transform: translate(0, 0);
            transform: translate(0, 0);
        }

        to {
            -webkit-transform: translate(100px, 100px);
            -moz-transform: translate(100px, 100px);
            -ms-transform: translate(100px, 100px);
            -o-transform: translate(100px, 100px);
            transform: translate(100px, 100px);
        }
     }

    @-moz-keyframes moving {
        from {
            -webkit-transform: translate(0, 0);
            -moz-transform: translate(0, 0);
            -ms-transform: translate(0, 0);
            -o-transform: translate(0, 0);
            transform: translate(0, 0);
        }

        to {
            -webkit-transform: translate(100px, 100px);
            -moz-transform: translate(100px, 100px);
            -ms-transform: translate(100px, 100px);
            -o-transform: translate(100px, 100px);
            transform: translate(100px, 100px);
        }
    }

    @-webkit-keyframes moving {
        from {
            -webkit-transform: translate(0, 0);
            -moz-transform: translate(0, 0);
            -ms-transform: translate(0, 0);
            -o-transform: translate(0, 0);
            transform: translate(0, 0);
        }

        to {
            -webkit-transform: translate(100px, 100px);
            -moz-transform: translate(100px, 100px);
            -ms-transform: translate(100px, 100px);
            -o-transform: translate(100px, 100px);
            transform: translate(100px, 100px);
        }
    }
    div#item {
        background-color:blue;
        height:20px;
        width:20px;
        -webkit-animation: moving 1s;
        -moz-animation: moving 1s;
        -ms-animation: moving 1s;
        -o-animation: moving 1s;
        animation: moving 1s;
    }
</style>

将过渡设置为1000ms或1秒。将此数字增加到10000ms，它应该会动画10秒。

嗨，可以使用CSS3动画来完成动画。代码如下

<!DOCTYPE html>

    @keyframes moving {
        from {
            -webkit-transform: translate(0, 0);
            -moz-transform: translate(0, 0);
            -ms-transform: translate(0, 0);
            -o-transform: translate(0, 0);
            transform: translate(0, 0);
        }

        to {
            -webkit-transform: translate(100px, 100px);
            -moz-transform: translate(100px, 100px);
            -ms-transform: translate(100px, 100px);
            -o-transform: translate(100px, 100px);
            transform: translate(100px, 100px);
        }
     }

    @-moz-keyframes moving {
        from {
            -webkit-transform: translate(0, 0);
            -moz-transform: translate(0, 0);
            -ms-transform: translate(0, 0);
            -o-transform: translate(0, 0);
            transform: translate(0, 0);
        }

        to {
            -webkit-transform: translate(100px, 100px);
            -moz-transform: translate(100px, 100px);
            -ms-transform: translate(100px, 100px);
            -o-transform: translate(100px, 100px);
            transform: translate(100px, 100px);
        }
    }

    @-webkit-keyframes moving {
        from {
            -webkit-transform: translate(0, 0);
            -moz-transform: translate(0, 0);
            -ms-transform: translate(0, 0);
            -o-transform: translate(0, 0);
            transform: translate(0, 0);
        }

        to {
            -webkit-transform: translate(100px, 100px);
            -moz-transform: translate(100px, 100px);
            -ms-transform: translate(100px, 100px);
            -o-transform: translate(100px, 100px);
            transform: translate(100px, 100px);
        }
    }
    div#item {
        background-color:blue;
        height:20px;
        width:20px;
        -webkit-animation: moving 1s;
        -moz-animation: moving 1s;
        -ms-animation: moving 1s;
        -o-animation: moving 1s;
        animation: moving 1s;
    }
</style>

    @keyframes moving {
        from {
            -webkit-transform: translate(0, 0);
            -moz-transform: translate(0, 0);
            -ms-transform: translate(0, 0);
            -o-transform: translate(0, 0);
            transform: translate(0, 0);
        }

        to {
            -webkit-transform: translate(100px, 100px);
            -moz-transform: translate(100px, 100px);
            -ms-transform: translate(100px, 100px);
            -o-transform: translate(100px, 100px);
            transform: translate(100px, 100px);
        }
     }

    @-moz-keyframes moving {
        from {
            -webkit-transform: translate(0, 0);
            -moz-transform: translate(0, 0);
            -ms-transform: translate(0, 0);
            -o-transform: translate(0, 0);
            transform: translate(0, 0);
        }

        to {
            -webkit-transform: translate(100px, 100px);
            -moz-transform: translate(100px, 100px);
            -ms-transform: translate(100px, 100px);
            -o-transform: translate(100px, 100px);
            transform: translate(100px, 100px);
        }
    }

    @-webkit-keyframes moving {
        from {
            -webkit-transform: translate(0, 0);
            -moz-transform: translate(0, 0);
            -ms-transform: translate(0, 0);
            -o-transform: translate(0, 0);
            transform: translate(0, 0);
        }

        to {
            -webkit-transform: translate(100px, 100px);
            -moz-transform: translate(100px, 100px);
            -ms-transform: translate(100px, 100px);
            -o-transform: translate(100px, 100px);
            transform: translate(100px, 100px);
        }
    }
    div#item {
        background-color:blue;
        height:20px;
        width:20px;
        -webkit-animation: moving 1s;
        -moz-animation: moving 1s;
        -ms-animation: moving 1s;
        -o-animation: moving 1s;
        animation: moving 1s;
    }
</style>

    @keyframes moving {
        from {
            -webkit-transform: translate(0, 0);
            -moz-transform: translate(0, 0);
            -ms-transform: translate(0, 0);
            -o-transform: translate(0, 0);
            transform: translate(0, 0);
        }

        to {
            -webkit-transform: translate(100px, 100px);
            -moz-transform: translate(100px, 100px);
            -ms-transform: translate(100px, 100px);
            -o-transform: translate(100px, 100px);
            transform: translate(100px, 100px);
        }
     }

    @-moz-keyframes moving {
        from {
            -webkit-transform: translate(0, 0);
            -moz-transform: translate(0, 0);
            -ms-transform: translate(0, 0);
            -o-transform: translate(0, 0);
            transform: translate(0, 0);
        }

        to {
            -webkit-transform: translate(100px, 100px);
            -moz-transform: translate(100px, 100px);
            -ms-transform: translate(100px, 100px);
            -o-transform: translate(100px, 100px);
            transform: translate(100px, 100px);
        }
    }

    @-webkit-keyframes moving {
        from {
            -webkit-transform: translate(0, 0);
            -moz-transform: translate(0, 0);
            -ms-transform: translate(0, 0);
            -o-transform: translate(0, 0);
            transform: translate(0, 0);
        }

        to {
            -webkit-transform: translate(100px, 100px);
            -moz-transform: translate(100px, 100px);
            -ms-transform: translate(100px, 100px);
            -o-transform: translate(100px, 100px);
            transform: translate(100px, 100px);
        }
    }
    div#item {
        background-color:blue;
        height:20px;
        width:20px;
        -webkit-animation: moving 1s;
        -moz-animation: moving 1s;
        -ms-animation: moving 1s;
        -o-animation: moving 1s;
        animation: moving 1s;
    }
</style>

小提琴手：

可能只有我一个人，但你的榜样什么都没有做。不仅仅是你，托尼，也没有为我做任何事。是一个更新版本。我已经在onLoad回调中的代码周围添加了一个超时。我必须补充的是，在safari中，它可以按预期工作，在Chrome和Firefox中，我得到了上面描述的问题。是的，假设1s：我也遇到了与10s相同的情况，当我点击“Run”时，末尾位置的蓝色div不会发生任何事情。相同的结果：，有时有效，有时无效$document.readyfunction{}；==$函数{}我将JSFIDLE设置更改为onLoad，现在它也可以工作了。仍然很奇怪，因为我会说这和使用$function{..}没有什么不同

    @keyframes moving {
        from {
            -webkit-transform: translate(0, 0);
            -moz-transform: translate(0, 0);
            -ms-transform: translate(0, 0);
            -o-transform: translate(0, 0);
            transform: translate(0, 0);
        }

        to {
            -webkit-transform: translate(100px, 100px);
            -moz-transform: translate(100px, 100px);
            -ms-transform: translate(100px, 100px);
            -o-transform: translate(100px, 100px);
            transform: translate(100px, 100px);
        }
     }

    @-moz-keyframes moving {
        from {
            -webkit-transform: translate(0, 0);
            -moz-transform: translate(0, 0);
            -ms-transform: translate(0, 0);
            -o-transform: translate(0, 0);
            transform: translate(0, 0);
        }

        to {
            -webkit-transform: translate(100px, 100px);
            -moz-transform: translate(100px, 100px);
            -ms-transform: translate(100px, 100px);
            -o-transform: translate(100px, 100px);
            transform: translate(100px, 100px);
        }
    }

    @-webkit-keyframes moving {
        from {
            -webkit-transform: translate(0, 0);
            -moz-transform: translate(0, 0);
            -ms-transform: translate(0, 0);
            -o-transform: translate(0, 0);
            transform: translate(0, 0);
        }

        to {
            -webkit-transform: translate(100px, 100px);
            -moz-transform: translate(100px, 100px);
            -ms-transform: translate(100px, 100px);
            -o-transform: translate(100px, 100px);
            transform: translate(100px, 100px);
        }
    }
    div#item {
        background-color:blue;
        height:20px;
        width:20px;
        -webkit-animation: moving 1s;
        -moz-animation: moving 1s;
        -ms-animation: moving 1s;
        -o-animation: moving 1s;
        animation: moving 1s;
    }
</style>