css3 animation not always working after onLoad
Question
Consider the following code:
$(function() {
$('#item').css({
webkitTransform: 'translate(100px, 100px)'
});
});
The element I try to translate has the following css:
transform: translate3d(0,0,0);
transition-duration: 1s;
transition-property: transform;
So I would expect a moving element during 1 seconds. 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). So the question is why does it not always work, because I'm waiting for the onLoad before I do anything ?
3 answers
solution1
0 2014-02-11 21:56:24
try with document.ready
$(document).ready(function()
$('#item').css({"-webkit-transform":"translate(100px,100px)"});
});
solution2
0 2014-02-11 22:05:04
You set the transition to 1000ms, or 1 second. Increase this number to 10000ms and it should animate for 10 seconds.
solution3
0 2014-02-12 00:04:18
Hi the animation can be done purely using CSS3 animation. 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/
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.