CSS3 Переходы происходят мгновенно?

Question

У меня есть элемент, называемый #artwork который должен быть анимированы:

#artwork{ 
-webkit-transition: all 20s ease-in; 
transition:all 20s ease-in; 
    width:75%; 
    display:block; 
    margin:0px auto; 
} 
#artwork.trans{ 
    width:60%; 
} 

Проблема заключается в том, переход происходит мгновенно, без каких-либо задержек (в моем случае 20-х годов). Я пробовал функцию toggleClass JQuery безрезультатно, и я также попробовал функцию css, которая также не работала.

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

Answer 1

При использовании сокращенного свойства перехода задержка помещается в конец. В вашем коде ваш переход длится 20 с без задержки.

Если вы хотите, чтобы это было отложено на 20-е годы, оно должно быть написано так:

transition:all 2s ease-in 20s; 

EDIT

Here is a demo

Answer 2

элемент должен быть нарисован на странице перед он может быть перенесен. Если вы добавите элемент, это хорошее правильное правило, чтобы дать 10-100 мс для первоначального состояния для рендеринга перед изменением его стилей.

Возможно, вы также захотите рассмотреть возможность использования анимации, с которой вы можете обойтись без задержки.

Вот анимация, которую я использовал для перемещения чего-то на страницу справа, не стесняйтесь изменять ее в соответствии с вашими потребностями.

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

Answer 3

Вы не можете переключиться с display:none на display:block в переходе. Вот почему ваши анимации происходят мгновенно.

Включая изменение отображения в переходе, CSS указывает на привязку к позиции.

Вам нужно переключить дисплей на блокировку, затем подождать рамку, а затем применить к ней другие новые свойства для анимации. Вот почему, когда вы меняете значения в инспекторе, они оживляют.

Вот codepen показывает пример выше http://codepen.io/gunderson/pen/emyReW

Answer 4

Как ответ Майкла выше, изображение должно быть обращено, прежде чем какая-либо анимация вступления в силу. Давайте посмотрим на код:

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

После того, как функция append называется, изображение начинает загружаться. В это время браузер продолжит другие функции css или toggleClass ниже append. Именно поэтому вы никогда не увидите анимацию вашего изображения.

Чтобы это исправить, нужно положить на добавление кода изображения в другую функцию, и анимация кода в другой функции, например:

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

В этом коде функция addImage будет вызывать две внешние функции, который будет происходить последовательно. При этом animateImage будет вызываться сразу после завершения функции appendImage.

Это демонстрация на Codepen.

Надеюсь, это поможет.