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

Question

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");

});

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

одно очевидное отличие заключается в том, что анимация занимает гораздо больше кода.

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

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

который является более современным и путь вперед

все, что вы могли бы добавить?

793 5

css css3 css-transitions

5 ответов:

Comments

Ничего не найдено.

Adam · Accepted Answer · 2013-12-15 03:41:41

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

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

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

Zach Saucier · Accepted Answer · 2013-12-15 03:36:27

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

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

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

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

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

paulcpederson · Accepted Answer · 2013-12-15 03:04:46

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

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

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

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

Jonan Georgiev · Accepted Answer · 2014-03-11 23:23:03

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

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

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

PixelsTech · Accepted Answer · 2015-06-17 18:35:24

Я считаю CSS3 animation vs CSS3 transition даст вам ответ, который вы хотите.

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

если производительность является проблемой, то выберите CSS3 transition.

если состояние должно поддерживаться после каждого перехода, то выберите переход CSS3.

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

если сложный анимация желательна. Тогда CSS3 анимация является предпочтительным.