CSS3 анимация не всегда работает после OnLoad

Рассмотрим следующий код:CSS3 анимация не всегда работает после OnLoad

$(function() { 
    $('#item').css({ 
     webkitTransform: 'translate(100px, 100px)' 
    }); 
});

элемент Я пытаюсь перевести имеет следующий CSS:

transform: translate3d(0,0,0); 
transition-duration: 1s; 
transition-property: transform;

Так что я бы ожидать подвижный элемент в течение 1 секунды , Оформить пробную версию here

Странная вещь, что анимация иногда случается, а иногда нет (это означает, что она не имеет анимации при 100px, 100px). Поэтому вопрос заключается в том, почему он не всегда работает, потому что я жду его onLoad, прежде чем что-либо сделаю?

источник

2014-02-11 Jeanluca Scaljeri

может быть только мне, но ваш пример Isnt делать что-либо. – Tony

Не только ты, Тони, ничего для меня не делает. – steinmas

[Здесь] (http://jsfiddle.net/Qk5g3/4/) - это обновленная версия. Я добавил тайм-аут вокруг кода внутри обратного вызова onLoad –

попробовать с document.ready

$(document).ready(function() 
    $('#item').css({"-webkit-transform":"translate(100px,100px)"}); 
});

источник

2014-02-11 21:56:24

такой же результат: [jsfiddle] (http://jsfiddle.net/Qk5g3/9 /), иногда он работает, а иногда он не делает –

'$ (document) .ready (function() {});' === '$ (function() {})' http: // learn. jquery.com/using-jquery-core/document-ready/ – brouxhaha

Вы установить переход на 1000 мс, или 1 секунду. Увеличьте это число до 10000 мс, и оно должно анимироваться в течение 10 секунд.

источник

2014-02-11 22:05:04 steinmas

true, I ment 1s :) У меня также такая же ситуация с 10, что, когда я нажимаю «Run», ничего не происходит с синим div в конечной позиции –

Привет, анимация может быть выполнена исключительно с использованием анимации CSS3. Код ниже

<!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/

источник

2014-02-12 00:04:18

Я изменил параметр jsfiddle для onLoad, и теперь он тоже работает ([jsfiddle] (http://jsfiddle.net/Qk5g3/13/)). Еще странно, потому что я бы сказал, что это не отличается от использования '$ (function() {..})' –

CSS3 анимация не всегда работает после OnLoad

ответ

Смежные вопросы