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

Итак, я понимаю, как выполнять 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. Что-нибудь еще вы могли бы добавить?

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

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

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

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

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

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

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

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

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

Переход:

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

Анимация @keyframes:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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