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

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

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

Однако бывают случаи, когда указанного эффекта можно добиться любым путем. Простым и распространенным примером может быть реализация выдвижного меню в стиле 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:

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

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

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

css css-animations css-transitions
person Code Poet    schedule 14.12.2013    source источник

Ответы (8)


arrow_upward
230
arrow_downward

Похоже, вы знаете, как это делать, но не знаете, когда это делать.

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

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

person Adam    schedule 15.12.2013
comment
также ознакомьтесь с этой статьей kirupa.com/html5/css3_animations_vs_transitions.htm, это правильно указывает Выяснилось, что переходы - это лучший способ взаимодействия с javascript. - person Scott Jungwirth; 22.06.2015

arrow_upward
41
arrow_downward

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

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

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

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

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

person Zach Saucier    schedule 15.12.2013

arrow_upward
30
arrow_downward

Более короткий ответ, прямо по существу:

Переход:

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

Анимация @keyframes:

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

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

person Grecdev    schedule 14.01.2019
comment
Когда вы говорили об ускорении ЦП, возможно, вы имели в виду ускорение графического процессора? Я считаю, что анимации без пересчета макета, такие как translate, получают это преимущество. - person jv-dev; 16.10.2019
comment
Я бы добавил к этому списку, что анимация не поддерживается IE 10, а переходы поддерживаются, если это все еще актуально для выбора. - person renardesque; 03.05.2021

arrow_upward
13
arrow_downward

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

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

    .two-transitions {
    transition: all 50ms linear;
}

.two-transitions:hover {
    transition: all 800ms ease-out;
}

  3. Анимации - это просто абстракции переходов, поэтому, если переход выполняется с аппаратным ускорением, анимация будет. Это не имеет значения.

  4. Оба очень современные.

  5. Мое практическое правило: если я использую один и тот же переход три раза, вероятно, это должна быть анимация. Это легче поддерживать и изменять в будущем. Но если вы используете его только один раз, для создания анимации требуется больше набора текста, и, возможно, оно того не стоит.

person paulcpederson    schedule 14.12.2013
comment
Я также должен добавить, что у анимации есть ключевые кадры, что позволяет вам делать очень сложные и контролируемые прогрессии, что в некотором роде потрясающе. - person paulcpederson; 15.12.2013

arrow_upward
3
arrow_downward

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

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

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

person Jonan Georgiev    schedule 11.03.2014
comment
Я не согласен с этим определением, поскольку оба указывают как и what - person Zach Saucier; 31.07.2014
comment
Я изначально не согласен со всем языком. Если бы люди могли просто перестать пытаться классифицировать и обернуть все бессмысленным сверхабстрактным поэтическим человеческим псевдоязыком и вместо этого перейти к сути, тогда нам, программистам, читающим текст, было бы лучше. - person Martin Andersson; 19.07.2021

arrow_upward
3
arrow_downward

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

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

person Eric Willigers    schedule 22.11.2018

arrow_upward
-1
arrow_downward

Я считаю, что переход между анимацией CSS3 и переходом CSS3 даст вам ответ хочешь.

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

  1. Если производительность вызывает беспокойство, выберите переход CSS3.
  2. Если состояние должно поддерживаться после каждого перехода, выберите переход CSS3.
  3. Если анимацию необходимо повторить, выберите анимацию CSS3. Потому что он поддерживает счетчик-итераций анимации.
  4. Если желательна сложная анимация. Тогда предпочтительнее CSS3-анимация.
person PixelsTech    schedule 17.06.2015
comment
# 2 и # 3 не соответствуют действительности - person Zach Saucier; 23.08.2015
comment
Я не уверен, насколько №3 неправда? Это кажется разумным моментом для рассмотрения, и количество итераций анимации кажется допустимым свойством: developer.mozilla.org/en-US/docs/Web/CSS/ - person ; 12.07.2017
comment
Две вещи с этим: 1) если переход запускается снова позже, он все равно повторяется, даже если он не сразу после первой итерации. 2) у вас может быть переход, который имитирует немедленные повторы в зависимости от анимации. См. мою статью о CSS-Tricks подробнее о том, что я имею в виду. - person Zach Saucier; 14.10.2019

arrow_upward
-1
arrow_downward

Не беспокойтесь, что лучше. Я хочу сказать, что если вы можете решить свою проблему с помощью одной или двух строк кода, просто сделайте это, а не пишите кучу кодов, которые приведут к аналогичному поведению. В любом случае, переход похож на подмножество анимации. Это просто означает, что переход может решить определенные проблемы, в то время как анимация, с другой стороны, может решить все проблемы. Анимация позволяет вам контролировать каждый этап, начиная с 0% и заканчивая 100%, чего не может сделать переход. Анимация требует, чтобы вы написали несколько кодов, в то время как переход использует одну или две строки кода для получения одного и того же результата в зависимости от того, над чем вы работаете. Исходя из точки зрения JavaScript, лучше всего использовать переход. Все, что включает только две фазы, то есть начало и конец, использует переход. Резюме: если это вызывает стресс, не используйте его, так как оба могут дать одинаковый результат.

person Unyime    schedule 07.05.2020