Итак, я понимаю, как выполнять CSS3-переходы и анимацию. Что не ясно, и я погуглил, это когда использовать какой.
Например, если я хочу сделать отскок мяча, ясно, что анимация - это путь. Я мог бы предоставить ключевые кадры, и браузер сделал бы промежуточные кадры, и у меня будет хорошая анимация.
Однако существуют случаи, когда указанный эффект может быть достигнут в любом случае. Простым и распространенным примером будет реализация меню выдвижного ящика в стиле Facebook:
Этот эффект может быть достигнут с помощью таких переходов:
.sf-page {
-webkit-transition: -webkit-transform .2s ease-out;
}
.sf-page.out {
-webkit-transform: translateX(240px);
}Или с помощью анимации, например, так:
.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); }
}С 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");
});Я хотел бы понять, каковы плюсы и минусы этих подходов.
- Одно очевидное отличие заключается в том, что для анимации требуется гораздо больше кода.
- Анимация дает лучшую гибкость. Я могу иметь различную анимацию для скольжения и в
- Есть ли что-то, что можно сказать о производительности. Используют ли оба преимущества ч / б ускорения?
- Который является более современным и путь вперед
- Что-нибудь еще вы могли бы добавить?
css
css-transitions
css-animations
Код Поэт
источник
источник
Я позволю определениям говорить самим за себя (согласно Merriam-Webster):
Названия соответствуют их целям в CSS
Итак, приведенный вами пример должен использовать переходы, потому что это только изменение из одного состояния в другое
источник
Краткий ответ, прямо на точку:
Переход:
Анимация @keyframes:
Оба используют ускорение процессора для более плавного эффекта.
источник
Анимация требует намного больше кода, если вы не используете один и тот же переход снова и снова, в этом случае анимация будет лучше.
Вы можете иметь различные эффекты для скольжения и выхода без анимации. Просто измените переход как к исходному правилу, так и к измененному правилу:
Анимации - это просто абстракции переходов, поэтому, если переход аппаратно ускоряется, анимация будет. Это не имеет значения.
Оба очень современные.
Мое эмпирическое правило: если я использую один и тот же переход три раза, вероятно, это должна быть анимация. Это легче поддерживать и изменять в будущем. Но если вы используете его только один раз, это больше печатать, чтобы сделать анимацию и, возможно, не стоит.
источник
Анимации - это просто плавное поведение множества свойств. Другими словами, он определяет, что должно происходить с набором свойств элемента. Вы определяете анимацию и описываете, как этот набор свойств должен вести себя в процессе анимации.
Переходы на другой стороне указывают, как свойство (или свойства) должно выполнять их изменение. Каждое изменение. Установка нового значения для определенного свойства, будь то с помощью JavaScript или CSS, всегда является переходом, но по умолчанию оно не является плавным. Установив
transitionстиль CSS, вы определяете другой (плавный) способ выполнения этих изменений.Можно сказать, что переходы определяют анимацию по умолчанию, которая должна выполняться каждый раз, когда указанное свойство изменяется.
источник
В современных браузерах, h / w ускорение происходит для свойств
filter,opacityиtransform. Это как для CSS-анимации, так и для CSS-переходов.источник
источник
Я верю, что CSS3 анимация против CSS3 перехода даст вам ответ, который вы хотите.
Ниже приводятся некоторые из них:
источник
Не беспокойся, что лучше. Я хочу сказать, что если вы можете решить свою проблему с помощью одной или двух строк кода, просто сделайте это, а не пишите кучу кодов, которые приведут к аналогичному поведению. В любом случае, переход подобен подмножеству анимации. Это просто означает, что переход может решить определенные проблемы, в то время как анимация может решить все проблемы. Анимация позволяет вам контролировать каждую стадию, начиная с 0% до 100%, что на самом деле не может сделать переход. Анимация требует, чтобы вы написали кучу кодов, в то время как переход использует одну или две строки кода для выполнения одного и того же результата в зависимости от того, над чем вы работаете. Исходя из JavaScript, лучше всего использовать переход. Все, что включает в себя только два этапа, то есть начало и конец использования перехода. Резюме, если это стресс, не
источник