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(".jpg");
});

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./-f5Oju8nYOe4/T91Kdqww3GI/AAAAAAAAGEk/s1tZR76WQfc/s1600/winter-wallpaper-7.jpg");
});

• javascript
• jquery
• css
• css-transitions

• I should also note, if I do Inspect Element and edit the elements width, the transition works fine... Odd! – James Heald Commented Feb 10, 2015 at 21:39

4 Answers 4

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%;}
}

You can't switch from display:none to display:block in a transition. This is why your animations are happening instantly.

Including the display change in the transition tells CSS to snap to position.

You need to switch display to block, then wait a frame, then apply your other new properties for them to animate. This is why when you change the values in the inspector they animate.

Here's a codepen showing an example of the above http://codepen.io/gunderson/pen/emyReW

When using the transition shorthand property, the delay is placed at the end. In your code, your transition will last 20s with no delay.

If you want it to be delayed by 20s, it should be written like this:

transition:all 2s ease-in 20s;

EDIT

Here is a demo

As Michael's answer above, the image need to be drawn before any animation taking effect. Let's take a look at your code:

$(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./-f5Oju8nYOe4/T91Kdqww3GI/AAAAAAAAGEk/s1tZR76WQfc/s1600/winter-wallpaper-7.jpg");
});

After the append function is called, the image begins to load. At this time, the browser will proceed other functions css or toggleClass below the append. Which is why you will never see your image animated.

To fix this, you need to put your append image code into another function, and animation code into another function, like this:

$(window).load(function(){
  var addImage = function(background){
    appendImage(background);
    animateImage();
  };
  var appendImage = function(background) {
    $("#images").append("<div class='image'><img id='artwork' src='"+ background +"' /></div>");
  };
  var animateImage = function() {
    $("#artwork").css("width", "65%");
    $("#artwork").toggleClass("trans");
  };
  addImage("http://4.bp.blogspot./-f5Oju8nYOe4/T91Kdqww3GI/AAAAAAAAGEk/s1tZR76WQfc/s1600/winter-wallpaper-7.jpg");
});

In this code, the addImage function will call two external functions, which will happen sequentially. By doing this, the animateImage will be called right after the appendImage function is finished.

This is the demo on Codepen.

Hope this helps.