Цепная анимация webkit

Question

Я хотел бы создать «цепочечную» анимацию, которая перемещает элемент div на экране в две разные точки на экране, в два последовательных шага.

Так что, если мой div начинается с (0,0), я бы хотел, чтобы этот div оживил и переместился к (100,100) через 2 секунды. После того, как он достигает последнего пункта назначения, он снова оживляется и перемещается в точку (200, 200) через 3 секунды.

Используя -webkit-animation, я могу сделать один перевод или анимацию, но я не могу связать в цепочку вторую анимацию, чтобы начать после того, как первая закончила - потому что у меня нет дескриптора, предоставленного (событие, или CSS) класс), который может дать мне такую ​​информацию.

Я счастлив использовать немного волшебства javascript как часть решения.

Вот код для визуализации того, что я пытаюсь сделать:

HTML:

<div id="box"></div>

CSS:

body {
    position: relative;
}

#box {
    width: 64px;
    height: 64px;
    position: absolute;
    text-indent: -9999px;
}

.translate1 {
    -webkit-transform: translate(100px, 100px);
    -webkit-transition: all 2s ease-in;
}

.translate2 {
    -webkit-transform: translate(100px, 100px);
    -webkit-transition: all 23 ease-in;
}

Javascript

$('#box').click(function(){ $(this).addClass('translate1') });

Редактировать: Мне нужно решение, которое использует -webkit-animation, потому что в настоящее время это лучший способ для отображения плавной нативной анимации в osx

Answer 1

Я использую jQuery и Modernizr, затем функцию, подобную этой:

speed = 500;

var vP = "";
var transitionEnd = "transitionEnd";
if ($.browser.webkit) {
    vP = "-webkit-";
    transitionEnd = "webkitTransitionEnd";
} else if ($.browser.msie) {
    vP = "-ms-";
    transitionEnd = "msTransitionEnd";  
} else if ($.browser.mozilla) {
    vP = "-moz-";
    transitionEnd = "transitionend";
} else if ($.browser.opera) {
    vP = "-o-";
    transitionEnd = "oTransitionEnd";
}   

function animate(object, cssProperties, callback, ms) {
    if (!ms) {
        ms = speed;
    }

    if (Modernizr.csstransitions) {
        object.css(vP+"transition", "all "+ms+"ms ease-in-out");

        object.css(cssProperties);

        if ($.isFunction(callback)) {

            object.bind(transitionEnd,function(){
                object.unbind(transitionEnd);
                callback();
            });

        }

    } else {
        if ($.isFunction(callback)) {       
            object.animate(cssProperties, ms, callback);
        } else {
            object.animate(cssProperties, ms);          
        }
    }
}

Тогда назовите это так: animate($("#someID"),{"left":"100px"});

Посмотрите на http://css3.bradshawenterprises.com/legacy/, чтобы узнать подробнее.

Answer 2

Самый простой способ добиться этого был бы ...

$('#box').click(function(){ 
  $(this).addClass('translate1').bind("webkitTransitionEnd", function() {
      $(this).addClass('translate2')
    })
});

http://jsfiddle.net/ALhym/

Есть некоторые проблемы с вашим примером кода, я думаю, что реальная версия не имеет их, но translate2 имеет те же свойства, что и translate1, и -webkit-transition: все 23 easy-in; отсутствует единица на длительность, которая требуется.

Answer 3

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

@-webkit-keyframes Move{
    0% {
        -webkit-transform: translate(0px,0px);
    }
    40% {
        -webkit-transform: translate(100px,100px);
    }     
    100%{
        -webkit-transform: translate(200px,200px);
    }
}

div:hover {
    -webkit-animation-name: Move;
    -webkit-animation-duration: 5s;
    -webkit-animation-fillmode: forward;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-timing-function: linear;
}

А если вам интересен более длинный учебник по CSS-анимациям, вот ваш действительно полный учебник по CSS-анимации

Answer 4

С помощью jquery ( animate ) вы можете сделать:

function moveTo100(){
  $('#box').animate({
    left: '+=100',
    top: '+=100'
  }, {
    duration: 2000,
    specialEasing: {
      width: 'linear',
      height: 'easeOutBounce'
    },
    complete: moveTo200
  });
}

function moveTo200(){
  $('#box').animate({
    left: '+=100',
    top: '+=100'
  }, {
    duration: 3000,
    specialEasing: {
      width: 'linear',
      height: 'easeOutBounce'
    }
  });
} 

Конечно, вы можете добавить другие эффекты и тип ослабления.