В общем, я заметил, что использование переходов / преобразований css3 более плавно, чем использование jquery .animate.Это не означает, что .animate не совсем подходит для большинства ситуаций.
Вы можете создать все это с помощью только CSS3, если используете анимацию по ключевым кадрам, как в http://coding.smashingmagazine.com/2011/05/17/an-introduction-to-css3-keyframe-animations/
Но большинствобраузеры не поддерживают это.Поэтому я бы предложил компромисс, если вы должны использовать методы css3.Технически вы можете сделать следующее:
1) создать три класса css с тремя разными позициями для вашего div (начало, между и конец), используя позиционирование abs и варьируя значения left и top.
2) добавьте transition: top 3s linear, left 3s linear; или что-то еще в div для начала, в первом классе с остальными свойствами внешнего вида.
3) используйте javascript для динамического добавления второго класса, что делает его переходом квторой набор коордов
4) используйте js, чтобы отслеживать, когда коорды равны второму состоянию, а затем добавьте третий класс, переводя его в третью позицию.Или просто используйте таймер для добавления третьего класса.
Вам нужно будет внести некоторые изменения в css, чтобы убедиться, что последний примененный класс перекрывает все остальное.Чтобы убедиться в правильности специфики, вы можете написать классы как base {}, base.second {} and .base.second.third {} или что-то в этом роде (здесь нет каламбура ...)
Даже тогда, только более новые версии большинства браузеров будут поддерживать егоЭто означает, что большая часть вашей аудитории не получит это.Попробуйте jquery, вы можете быть удивлены.