I have an element called #artwork
which needs to be animated:
#artwork{
-webkit-transition: all 20s ease-in;
transition:all 20s ease-in;
width:75%;
display:block;
margin:0px auto;
}
#artwork.trans{
width:60%;
}
The problem is, the transition happens instantly without any delay (in my case 20s). I have tried Jquery's toggleClass
function to no avail and I also tried the css
function which also didn't work.
$(window).load(function(){
var addImage = function(background){
$("#images").append("<div class='image'><img id='artwork' src='"+ background +"' /></div>");
$("#artwork").css("width", "65%");
$("#artwork").toggleClass("trans");
};
addImage("http://4.bp.blogspot.com/-f5Oju8nYOe4/T91Kdqww3GI/AAAAAAAAGEk/s1tZR76WQfc/s1600/winter-wallpaper-7.jpg");
});
The element needs to be drawn on the page before it can be transitioned. If you add an element it's a good rule of thumb to give 10-100ms for the initial state to render before changing it's styles.
You may also want to consider using an animation instead, which you can do without the delay.
Here's an animation I've used to move something into the page from the right, feel free to modify it to suit your needs.
.some_class{
-webkit-animation: myanimation 500ms ease-in-out;
-moz-animation: myanimation 500ms ease-in-out;
animation: myanimation 500ms ease-in-out;
}
@-webkit-keyframes myanimation {
0% { left: 200%; }
100% { left: 0%; }
}
@keyframes myanimation {
0% { left: 200%; }
100% { left: 0%;}
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With