CSS: анимация против перехода

Итак, я понимаю, как выполнять как CSS3-переходы, так и анимации. Что непонятно, и я googled, когда использовать.

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

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

Этот эффект может быть достигнут посредством таких переходов:

.sf-page {
    -webkit-transition: -webkit-transform .2s ease-out;
}

.sf-page.out {
    -webkit-transform: translateX(240px);
}

http://jsfiddle.net/NwEGz/

Или, используя такие анимации:

.sf-page {
    -webkit-animation-duration: .4s;
    -webkit-transition-timing-function: ease-out;
}

.sf-page.in {
    -webkit-animation-name: sf-slidein;
    -webkit-transform: translate3d(0, 0, 0);
}

.sf-page.out {
    -webkit-animation-name: sf-slideout;
    -webkit-transform: translateX(240px);
}

@-webkit-keyframes sf-slideout {
    from { -webkit-transform: translate3d(0, 0, 0); }
    to { -webkit-transform: translate3d(240px, 0, 0); }
}

@-webkit-keyframes sf-slidein {
    from { -webkit-transform: translate3d(240px, 0, 0); }
    to { -webkit-transform: translate3d(0, 0, 0); }
}

http://jsfiddle.net/4Z5Mr/

С HTML, который выглядит так:

<div class="sf-container">
    <div class="sf-page in" id="content-container">
        <button type="button">Click Me</button>
    </div>
    <div class="sf-drawer">
    </div>
</div>

И этот сопровождающий jQuery script:

$("#content-container").click(function(){
    $("#content-container").toggleClass("out");
    // below is only required for css animation route
    $("#content-container").toggleClass("in");
});

Что я хотел бы понять, каковы плюсы и минусы этих подходов.

Одно очевидное отличие заключается в том, что анимация занимает намного больше кода.
Анимация дает лучшую гибкость. У меня может быть разная анимация для выскакивания и
Есть ли что-то, что можно сказать о производительности. Обе используют преимущества ускорения h/w?
Что более современно и как идти вперед.
Что еще вы можете добавить?

Ответ 1

Похоже, у вас есть инструкция о том, как их выполнять, а не когда делать это.

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

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

Ответ 2

Я дам определениям самим говорить (по словам Мерриама-Вебстера):

Переход: движение, развитие или эволюция из одной формы, стадии или стиля в другой

Анимация: наделена жизнью или качествами жизни; полный движения

Имена соответствующим образом соответствуют их целям в CSS

Итак, приведенный вами пример должен использовать переходы, потому что это только переход из одного состояния в другое

Ответ 3

Анимация требует гораздо больше кода, если вы не используете один и тот же переход много раз и в этом случае анимация будет лучше.
У вас могут быть разные эффекты для вставки и выключения без анимации. Просто измените как исходное правило, так и измененное правило:
```
.two-transitions {
    transition: all 50ms linear;
}

.two-transitions:hover {
    transition: all 800ms ease-out;
}
```
Анимация - это просто абстракции переходов, поэтому, если переход на аппаратное ускорение, анимация будет. Это не имеет значения.
Оба очень современные.
Мое эмпирическое правило состоит в том, что я использую один и тот же переход три раза, вероятно, это анимация. Это легче поддерживать и изменять в будущем. Но если вы используете его только один раз, это больше набирает анимацию и, возможно, не стоит.

Ответ 4

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

Переходы с другой стороны указывают, как свойство (или свойства) должно выполнить их изменение. Каждое изменение. Установка нового значения для определенного свойства, будь то с помощью JavaScript или CSS, всегда является переходом, но по умолчанию она негладкая. Установив transition в стиле css, вы определяете другой (плавный) способ выполнения этих изменений.

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

Ответ 5

Краткий ответ, прямо на точку:

Переход:

Требуется запускающий элемент (: hover,: focus и т.д.)
Только 2 состояния анимации (начало и конец)
Используется для более простой анимации (кнопки, выпадающие меню и т.д.)
Легче создавать, но не так много возможностей анимации/эффектов

Анимация @keyframes:

Может использоваться для бесконечной анимации
Можно установить более 2 состояний
Не имеющий границ

Оба используют ускорение процессора для более плавного эффекта.

Ответ 6

Есть ли что-то, что можно сказать о производительности. Используют ли оба преимущества ч/б ускорения?

В современных браузерах ч/б ускорение происходит для свойств filter, opacity и transform. Это как для CSS-анимации, так и для CSS-переходов.

Ответ 7

Я верю анимация CSS3 против перехода CSS3 даст вам ответ, который вы хотите.

В основном ниже приведены несколько вылетов:

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