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

157

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

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

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

Ответы:

211

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

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

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

Адам
источник
7
проверьте эту статью тоже kirupa.com/html5/css3_animations_vs_transitions.htm , там правильно указано , что переходы - это путь, когда нужно делать взаимодействия javascript.
Скотт Джунгвирт
40

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

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

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

Названия соответствуют их целям в CSS

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

Зак Соусье
источник
21

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

Переход:

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

Анимация @keyframes:

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

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

Grecdev
источник
Когда вы говорите «ускорение процессора», возможно, вы имели в виду «ускорение GPU»? Я считаю, что
jv-dev
12
  1. Анимация требует намного больше кода, если вы не используете один и тот же переход снова и снова, в этом случае анимация будет лучше.

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

    .two-transitions {
        transition: all 50ms linear;
    }
    
    .two-transitions:hover {
        transition: all 800ms ease-out;
    }
  3. Анимации - это просто абстракции переходов, поэтому, если переход аппаратно ускоряется, анимация будет. Это не имеет значения.

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

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

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

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

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

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

Джонан Георгиев
источник
1
Я не согласен с этим определением, поскольку оба указывают, как и что
Зак Заусье
3

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

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

Эрик Виллигерс
источник
1

.yourClass {
    transition: all 0.5s;
color: #00f;
margin: 50px;
font-size: 20px;
cursor: pointer;
}

.yourClass:hover {
    color: #f00;
}
<p class="yourClass"> Hover me </p>


источник
-1

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

Ниже приводятся некоторые из них:

  1. Если производительность является проблемой, выберите переход CSS3.
  2. Если состояние должно поддерживаться после каждого перехода, выберите CSS3 переход.
  3. Если необходимо повторить анимацию, выберите анимацию CSS3. Потому что он поддерживает анимацию-число итераций.
  4. Если сложная анимация желательна. Тогда CSS3 анимация предпочтительнее.
PixelsTech
источник
3
№ 2 и № 3 не соответствуют действительности
Зак Сауцер
1
Я не уверен, как № 3 не соответствует действительности? Это представляется разумным пункт , чтобы рассмотреть, и анимация-итерация подсчета кажется, действительное свойство: developer.mozilla.org/en-US/docs/Web/CSS/...
1
Две вещи с этим: 1) если переход начинается снова позже, он все еще является «повторением», даже если это не сразу после первой итерации. 2) у вас может быть переход, который подделывает немедленные повторы в зависимости от анимации. Смотрите мою статью CSS-хитрости, чтобы узнать, что я имею в виду.
Зак
-1

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

Unyime
источник