css3 动画在 onLoad 后并不总是有效答案

【问题标题】：css3 animation not always working after onLoadcss3 动画在 onLoad 后并不总是有效
【发布时间】：2014-02-11 21:54:59
【问题描述】：

考虑以下代码：

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

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

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

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

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

【问题讨论】：

可能只是我，但你的例子没有做任何事情。
不只是你托尼，也不为我做任何事。
Here 是更新版本。我在 onLoad 回调中的代码周围添加了超时
我必须补充一点，在 safari 中它按预期工作，在 Chrome 和 Firefox 中我遇到了上述问题

标签： javascript jquery css transform

【解决方案1】：

您将转换时间设置为 1000 毫秒，即 1 秒。将此数字增加到 10000 毫秒，它应该动画 10 秒。

【讨论】：

真的，我 ment 1s :) 我也有 10s 的情况，当我点击“运行”时，结束位置的蓝色 div 没有任何反应

【解决方案2】：

尝试使用 document.ready

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

【讨论】：

同样的结果：jsfiddle，有时有效，有时无效
$(document).ready(function(){}); === $(function(){}) learn.jquery.com/using-jquery-core/document-ready

【解决方案3】：

您好，动画可以完全使用 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>

小提琴：http://jsfiddle.net/Qk5g3/11/

【讨论】：

我将 jsfiddle 设置更改为 onLoad，现在它也可以工作了 (jsfiddle)。还是很奇怪，因为我会说这与使用 $(function(){..}) 没有什么不同