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

请考虑以下代码：

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

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

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

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

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

将

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

尝试使用 document.ready

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

嗨，动画可以纯粹使用 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/

相关内容

最新更新

热门标签：