css3动画在onLoad之后并不总是有效
[英]css3 animation not always working after onLoad
问题描述
Consider the following code: 
考虑以下代码：
$(function() {
$('#item').css({
webkitTransform: 'translate(100px, 100px)'
});
});
The element I try to translate has the following css: 我尝试翻译的元素具有以下CSS：
transform: translate3d(0,0,0);
transition-duration: 1s;
transition-property: transform;
So I would expect a moving element during 1 seconds. 因此，我希望在1秒钟内移动一个元素。 Checkout the demo here 在此处签出演示
The strange thing is that the animation sometimes happens and sometimes not (meaning it is without any animation at 100px, 100px). 奇怪的是，动画有时会发生而有时不会发生（这意味着动画没有100px，100px的动画）。 So the question is why does it not always work, because I'm waiting for the onLoad before I do anything ? 所以问题是为什么它不总是有效，因为我在做任何事情之前都在等待onLoad？
3 个解决方案
解决方案1
0 2014-02-11 21:56:24
try with document.ready 尝试使用document.ready
$(document).ready(function()
$('#item').css({"-webkit-transform":"translate(100px,100px)"});
});
解决方案2
0 2014-02-11 22:05:04
You set the transition to 1000ms, or 1 second. 您将过渡设置为1000毫秒或1秒。 Increase this number to 10000ms and it should animate for 10 seconds. 将此数字增加到10000ms，它应该动画10秒钟。
解决方案3
0 2014-02-12 00:04:18
Hi the animation can be done purely using CSS3 animation. 嗨，动画可以完全使用CSS3动画完成。 The code is below 代码如下
<!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>
Fiddle: http://jsfiddle.net/Qk5g3/11/ 小提琴： http : //jsfiddle.net/Qk5g3/11/
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.