CSS3 переходы и JQuery анимация


Содержание
Цукерберг рекомендует:  Ооп - Возврат значения

CSS3 переходы, трансформации и анимации

В двух предыдущих главах мы рассмотрели некоторые новые свойства и возможности CSS3. Однако все, что мы до сих пор рассматривали, было статичным, а версия CSS3 способна на большее.

В настоящее время, если вам потребуется анимировать элементы на веб-странице, то вы, скорее всего, либо напишете собственный JavaScript-код, обеспечивающий выполнение требуемого действия, либо обратитесь к популярной JavaScript-библиотеке вроде jQuery, которой поручите всю тяжелую работу Однако разработчики, увлекающиеся CSS3, явно не согласны с засильем JavaScript в этой области и надеются, что ситуация вскоре изменится. Несмотря на то что версия CSS3 вряд ли узурпирует «власть» jQuery или чего-то в этом роде в ближайшее время, она идеально подходит для обеспечения плавных переходов (например, при наведении указателя мыши) и перемещения элементов по экрану Это отличная новость, поскольку она означает, что при увеличении количества замечательных современных браузеров, устанавливаемых на устройствах (например, на новейших смартфонах), мы можем использовать CSS для обеспечения анимаций вместо того, чтобы задействовать для этого JavaScript.

Вывод: вы, надо полагать, можете вычеркнуть пункт «научиться анимировать элементы с помощью jQuery» из своего списка текущих дел, поскольку уже знаете, что это можно сделать, используя только CSS. Как и всегда, CSS3-свойства не приведут к каким-либо отрицательным последствиям в устаревших браузерах. Такие браузеры будут просто пропускать непонятные им правила, как будто тех и нет вовсе.

В этой главе мы поговорим о следующем:

— что такое CSS3-переходы и как их можно использовать;

— как писать CSS3-переходы и их сокращенный синтаксис;

— как применять временные функции для контроля над плавностью выполнения CSS3-переходов (ease, cubic-bezier и др.);

— как устанавливать занятные переходы для адаптивных сайтов;

— что такое CSS3-трансформации и как мы можем их использовать;

— как добавлять разные 2D-трансформации (scale, rotate, skew, translate и др.);

— что такое 3D-трансформации и как их обеспечить;

— как добавить анимацию с помощью CSS3 (с использованием @keyframes).

Вопрос по css3, css-transitions, ipad, jquery &#8211 что быстрее? CSS3 переходы или анимации jQuery?

Я работаю над приложением iPad для HTML5 и уже внедрил поддержку ontouch для более быстрого запуска событий, и я использую jQuery для более удобного нацеливания на элементы, но для анимации я использую переходы CSS3

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

ый, если я не ошибаюсь, по-прежнему полагается на таймер . хотя и новичок в игре с ним), то это дает вам преимущество аппаратного ускорения с javascript. Если вы просто хотите что-то передвигать при наведении, переходы работают отлично. CSS-переходы могут выполняться немного плавнее, но это компромисс, вы отказываетесь от тонны управления javascript над анимацией, используя переходы. Мне нравится сохранять стиль в CSS и поведение в JS — разве это не так, как это должно работать? CSS-переходы отчасти сломали эту логику .

Процессор CSS написан на C ++, а нативный код выполняется очень быстро, тогда как jQuery (JavaScript) является интерпретируемым языком, и браузер не может предсказать JavaScript заранее. http://dev.opera.com/articles/view/css3-vs-jquery-animations/

Перейдите по ссылке выше, чтобы узнать об экспериментах, проведенных над CSS3 против jQuery.

should be быстрее, потому что они являются родными для браузера.

Эта статья (http://css-tricks.com/myth-busting-css-animations-vs-javascript/) проводит отличное сравнение CSS-преобразований с анимациями jQuery и GSAP (еще одна библиотека JavaScript).

CSS animations are significantly faster than jQuery. However, on most devices and browsers I tested, the JavaScript-based GSAP performed even better than CSS animations

ТакCSS transforms are faster than jQuery animations, но не позволяйте этому заставить вас предположить, что CSS-преобразования f, aster чемJavaScript, GSAP показывает, чтоJavaScript can outperform CSS.

A head to head comparison of CSS transitions and jQuery’s animate. Rather than setting a timer to run repeatedly, transitions are handled natively by the browser. In my rather unscientific testing, transitions are always quicker, running with a higher frame rate, especially with high numbers of elements. They also have the advantage that colours can be animated easily, rather than having to rely on plugins.

A head to head comparison of CSS transitions and jQuery’s animate. Rather than setting a timer to run repeatedly, transitions are handled natively by the browser. In my rather unscientific testing, transitions are always quicker, running with a higher frame rate, especially with high numbers of elements. They also have the advantage that colours can be animated easily, rather than having to rely on plugins.

ТестВот наряду с этим выводом.

Javascript animations based on timers can never be as quick as native animations, as they don’t have access to enough of browser to make the same optimisations. These animations should be used as a fallback only in legacy browsers.

Также обратите вниманиеэтот,

CSS3 animations are terriffic but do use a lot of your processor’s power. There is no way to fine tune the animation with CSS3 the same way you can using a framework like jQuery. So, as long as CSS3 animations aren’t CPU friendly you better stick with jQuery.

что быстрее? CSS3 переходы или анимации jQuery?

Я работаю над приложением iPad для HTML5 и уже реализовал поддержку ontouch для более быстрого запуска событий, и я использую jQuery для более удобного нацеливания на элементы, но для анимации я использую переходы CSS3

Что ты думаешь быстрее? использовать анимации jQuery, так как я уже импортировал библиотеку или использовал переходы CSS3 при нацеливании на элементы с помощью jQuery?

10 ответов

Согласно этой ссылке , анимация jQuery намного медленнее, чем анимация CSS.

Причина может быть в том, что jquery должен модифицировать реквизиты элемента DOM, используя таймеры и цикл. CSS является частью движка браузера. который зависит в значительной степени от аппаратного обеспечения системы. Вы также можете проверить это в профилировании Chrome или Firefox.

CSS анимация почти всегда будет быстрее.

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

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

Его css3 быстрее и потребляет меньше памяти и более плавный. Процессор CSS написан на C ++, а нативный код выполняется очень быстро, тогда как jQuery (JavaScript) — интерпретируемый язык, и браузер не может предсказать JavaScript заранее. http://dev.opera.com/articles/view/css3-vs-jquery-animations/

Перейдите по ссылке выше, чтобы узнать об экспериментах, проведенных на CSS3 против jQuery.

В этой статье (http://css-tricks.com/myth-busting-css-animations-vs-javascript/) проводится отличное сравнение CSS-преобразований и анимаций jQuery с GSAP (еще одна библиотека JavaScript).

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

Таким образом, CSS-преобразования выполняются быстрее, чем анимация jQuery , но не позволяйте этому предполагать, что CSS-преобразования выполняются быстрее, чем JavaScript . GSAP показывает, что JavaScript может превзойти CSS .

CSS3 будет быстрее, так как он стандартно поставляется с браузером, где JQuery — это еще один файл, который необходимо загрузить, однако я обнаружил, что в зависимости от анимации JQuery может работать намного плавнее. Иногда также приятно экспериментировать с чистым Javascript время от времени.


Разрешение браузеру контролировать последовательность анимации позволяет браузеру оптимизировать производительность и эффективность, например, уменьшая частоту обновления анимаций, запускаемых на вкладках, которые в данный момент не видны.

WebKit (который работал на Safari) также использует аппаратное ускорение композитинга , которое может оказать гораздо большее влияние на производительность, чем все, что может сделать Javascript в настоящее время. (Я думаю, что это очень скоро изменится, так как будет добавлено больше функций для управления вычислениями). Это потому, что оно использует преимущества выделенного оборудования, если оно доступно для выполнения вычислений, вместо того, чтобы делать это с помощью переведенного языка, такого как Javascript.

Я не уверен на 100%, аппаратно ли ускорен WebKit на iPad ; однако, само собой разумеется, что, поскольку он стандартизирован и становится все более популярным, со временем это только улучшится.

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

Тест здесь вместе с этим выводом.

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

Также обратите внимание на это ,

CSS3-анимация потрясающая, но использует много мощности вашего процессора. Невозможно точно настроить анимацию с помощью CSS3 так же, как с помощью фреймворка, такого как jQuery. Так что, пока CSS3-анимация не загружает процессор, лучше придерживаться jQuery.

что быстрее? CSS3 переходы или JQuery анимации?

Я работаю на приложении IPad HTML5, и я уже реализовал ontouch поддержки для запуска событий быстрее, и я использую JQuery, чтобы предназначаться элементы легче, но для анимации я использую CSS3 переходы

Что вы думаете быстрее? с помощью JQuery анимации, так как я уже импортировали библиотеку или использовать CSS3 переходы при ориентации элементов с JQuery?

По этой ссылке , JQuery анимации гораздо медленнее , чем CSS — анимации.

Причина может быть потому , что JQuery должен изменить реквизит элемента DOM с использованием таймеров и петли. CSS является частью браузера двигателя. которая зависит в значительной степени от аппаратной части системы. Вы также можете проверить , что в профилировании Chrome или Firefox.

CSS анимации почти всегда будет быстрее.

Голова к голове сравнения CSS переходов и анимации JQuery в. Вместо того, чтобы устанавливать таймер для запуска несколько раз, переходы обрабатываются изначально браузер. В моем довольно ненаучном тестировании, переходы всегда быстрее, работают с более высокой частотой кадров, особенно с большим числом элементов. Они также имеют то преимущество, что цвета могут быть анимированными легко, вместо того, чтобы полагаться на плагиных.

Его css3 ИТС быстрее и потребляет меньшую память и становится более гладкой. Процессор CSS написан на C ++ и родной код выполняется очень быстро , в то время как JQuery (JavaScript) является интерпретируемым языком , и браузер не может предсказать JavaScript вперед во времени. http://dev.opera.com/articles/view/css3-vs-jquery-animations/

Посмотреть ссылку выше, чтобы знать об экспериментах, проводимых над CSS3 против JQuery

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

Эта статья (http://css-tricks.com/myth-busting-css-animations-vs-javascript/) делает отличное сравнение CSS трансформирует против JQuery анимации против GSAP (другая библиотека JavaScript).

CSS анимации значительно быстрее, чем JQuery. Тем не менее, на большинстве устройств и браузеров, которые я тестировал, JavaScript базирующаяся в GSAP выполняется даже лучше, чем CSS анимации

Таким образом , CSS преобразования быстрее , чем JQuery анимации , но не позволяйте этому сделать вы предполагаете , что CSS преобразования быстрее , чем JavaScript . GSAP показывает , что JavaScript может превзойти CSS .

Цукерберг рекомендует:  Минимальный набор для продвижения сайта на WordPress

CSS3 будет быстрее, так как он поставляется с браузером, где, как JQuery является другой файл, который должен быть загружен, однако я обнаружил, что в зависимости от анимации JQuery может работать намного ровнее. Иногда это также приятно экспериментировать с чистым JavaScript, и теперь снова.

Голова к голове сравнения CSS переходов и анимации JQuery в. Вместо того, чтобы устанавливать таймер для запуска несколько раз, переходы обрабатываются изначально браузер. В моем довольно ненаучном тестировании, переходы всегда быстрее, работают с более высокой частотой кадров, особенно с большим числом элементов. Они также имеют то преимущество, что цвета могут быть анимированными легко, вместо того, чтобы полагаться на плагиных.

Тест здесь наряду с этим выводом.

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

Также обратите внимание на это ,

CSS3 анимация terriffic, но действительно использует много энергии вашего процессора. Там нет никакого способа для точной настройки анимации с CSS3 таким же образом вы можете с помощью такой структуры, как JQuery. Таким образом, до тех пор, как CSS3 анимации не CPU дружественных вам лучше придерживаться JQuery.

Vavik 96

Интернет дайджест для вебмастеров и фотографов

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

С анимированным “Cycle Slider” вы можете очень стильно продемонстрировать свои картины или фотографии. В интернете уже есть много разных типов слайдеров, которые анимированны частично с помощью JQuery плагинов или JavaScript. Есть много вариантов навигации и эффектов перехода на выбор. Но можно всё это сделать только с помощью CSS3 без использования JavaScript.

На этой странице будет создан слайдер выполняющий конкретные требования.

Требования

  • Изображения отталкивает видимое изображение в любом направлении
  • Прогресс бар будет отображаться при загрузке отдельных изображений
  • Когда указатель мыши над изображением, описание отображается серым цветом и в верхнем регистре. Кроме того, должна остановиться анимация, так что бы зритель имел больше времени для просмотра изображения или чтобы прочитать длинный текст. При этом в верхнем правом углу будет показан значок “пауза”.
  • Вся презентация, как обычно, заключена в рамку и имеет тень.

Так как я хочу показать рядом с фотографиями сопроводительный текст, я буду строить HTML5 код с “figure-Elemente», а также расширю его, включив дополнительные “figcaption-Elemente“. В первом примере построим слайдер с “DIV” контейнером и пятью разными именами, это реализуется просто и элегантно.
Для индикатора в нижней части слайдера, вам нужен отдельный контейнер “DIV” с именем “Load“, а также для значок паузы с именем “Pause”. Но в целом скелет HTML5 остается очень четким и имеет одинаковую структуру для всех примеров.

Так как при наведении мыши на изображение, анимация должна остановится, мы покажем курсор “рука”.
Изображения позиционируются абсолютно с добавлением “opacity: 0“.
Сопровождающие тексты, отмечены элементом HTML5 “figcaption“. Здесь определяется шрифт, цвет шрифта и его тень, также размер и расположение “Schriftbox“. Сначала, текст за кадром, и только тогда, когда мышь находится над изображением, текст, за полсекунды, появится слева.

Прогресс-бар

Следующее, что определяется в таблице стилей является “прогресс бар”. И в этом, на самом деле нет ничего сложного.
Это просто контейнер “DIV“, который находится в нижней части слайдера с высотой 2 пикселя, и имеет анимацию в 6 секунд. В течение этого времени, ширина контейнера увеличивается от 0% до 100% и представлена ​​цветами радуги, вот так, относительно легко реализовано. Что бы, при этом, бар всегда был виден, контейнер “DIV” с “Z“-индексом: “2“, располагается на переднем плане.


Значок “Пауза”

Теперь реализуем значок “Пауза”. Поскольку значок состоит из двух заглавных букв “I” и должен быть расположен поверх изображения, контейнер должен иметь значение “position: absolute” . Только тогда, когда указатель мыши находится над изображением, значок появляется с непрозрачностью “1” за пол – секунды, на переднем плане.

CSS3 переходы и ключевой кадр анимации

А вот действительно интересная часть CSS3.
На протяжении всей анимации, то есть, пока показываются все пять изображений, избрана задержка воспроизведения в 30 секунд и анимация с помощью “infinite” повторяеся в бесконечном цикле. Для вызова правил “@keyframes”, я использую снова псевдо-класс “nth-of-type”.
При нахождении мыши над изображением, анимация останавливается.
В правилах “@ KeyFrames” вводом значений “top:” установлено движение изображений, а также с помощью”opacity” устанавливается их видимость.

Краткий вариант правил “@keyframes” выглядит следующим образом:

Расчет процентов для анимации выглядит следующим образом:

A: Количество (5 изображений)

Z: Время, в течении которого изображение видно полностью (4 Sekunden)

D: Dauer einer Überblendung (2 секунды)

G = ( Z + D ) * A: Общее время анимации (30 секунд)

S = G / A: Задерка (6 секунд)

– [ 100% * ( Z + ( 2 * D ) ) / G ] = 26,66%

Вот и все. CSS3 Slider с индикатором прогресса и функцией паузы закончен.

Чтобы изменить направление движения на справа налево, , необходимо лишь изменить информацию “top:” на right:” и значения к нему.
В следующем примере, новое изображение надвигается на видимое, а также анимация текста несколько иная.
Ниже показаны только изменённые инструкции CSS3 по отношению к первому примеру.

Пример:

В следующем примере, новое изображение выталкивает видимое изображение из поля зрения.
Ниже, снова, приведены только модифицированные инструкции CSS3 по отношению к первому примеру.

Пример:

В последнем примере, новая картинка и видимая вращаются относительно друг друга. Текст анимации так же, как и в предыдущем примере.
Ниже, только модифицированные инструкции CSS3 относительно первого примера.

Пример:

Теперь вы можете, реализовать множество различных вариантов слайдера.

что быстрее? CSS3 переходы или jQuery анимации?

Я работаю над приложением iPad HTML5, и я уже реализовал поддержку ontouch, чтобы вызвать события быстрее, и я использую jQuery, чтобы легче ориентироваться на элементы, но для анимации я использую переходы CSS3

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

10 ответов

CSS анимации почти всегда будет быстрее.

Сравнение переходов CSS и jQuery animate.
Вместо настройки таймера на повторное выполнение переходы обрабатываются
изначально браузером. В моем довольно ненаучном тестировании,
переходы всегда быстрее, работают с большей частотой кадров,
особенно с большим количеством элементов. Они также имеют преимущество
что цвета могут быть анимированы легко, а не полагаться на
Плагины.

Переходы CSS3 должны быть быстрее, так как они являются собственными для браузера.

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

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

Я не на 100% уверен, является ли WebKit на iPad аппаратно ускоренным; однако было бы разумно, что, поскольку он стандартизирован и растет в популярности, что это будет только улучшаться со временем.

Согласно этой ссылке , анимация jQuery намного медленнее, чем анимация css.

Причина может быть в том, что jquery должен изменить реквизиты элемента DOM с помощью таймеров и цикла. CSS является частью движка браузера . что в значительной степени зависит от аппаратного обеспечения системы. Вы также можете проверить это в профилировании Chrome или Firefox.

Сравнение переходов CSS и jQuery animate.
Вместо настройки таймера на повторное выполнение переходы обрабатываются изначально
браузером.
В моем довольно ненаучном тестировании переходы всегда быстрее
более высокая частота кадров, особенно с большим количеством элементов. Они также имеют
преимущество, что цвета могут быть анимированы легко, а не полагаться на
Плагины.

Тест здесь вместе с этим выводом.

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

CSS3 анимации terriffic, но использовать много вашего процессора
сила.
Нет способа настроить анимацию с помощью CSS3 так же, как вы можете использовать
фреймворк вроде jQuery. Таким образом, до тех пор, пока анимации CSS3 не дружелюбны к процессору вы
лучше придерживаться jQuery.

CSS3 будет быстрее, так как он стандартно поставляется с браузером, где as JQuery-это еще один файл, который должен быть загружен, однако я обнаружил, что в зависимости от анимации JQuery может работать намного плавнее. Иногда также приятно время от времени экспериментировать с чистым Javascript.

Если вы используете анимацию jQuery/javascript с тегом canvas (который, если я не ошибаюсь, все еще полагается на таймер… new to playing around with it though), то это дает вам преимущество аппаратного ускорения с javascript. Если вы просто хотите переместить что-то вокруг, когда вы зависаете, то переходы работают отлично. Переходы CSS могут работать немного более плавно, но это компромисс, вы отказываетесь от тонны контроля javascript над анимацией с помощью переходов. I like to keep style in CSS and behavior in JS — isn’t that how it’s suggested to work anyway?CSS-переходы нарушили эту логику.

Свое css3 свое более быстрое и уничтожает меньшую память и выглаживатель.
CSS процессор написан на C++ и родной код выполняется очень быстро, в то время как jQuery (JavaScript) является интерпретируемым языком, и браузер не может предсказать JavaScript вперед во времени.
http://dev.opera.com/articles/view/css3-vs-jquery-animations/

Посмотреть ссылку выше, чтобы узнать об экспериментах, проведенных над CSS3 vs jQuery

Эта статья (http://css-tricks.com/myth-busting-css-animations-vs-javascript/) делает отличное сравнение CSS transforms vs jQuery animations vs GSAP (другая библиотека JavaScript).

CSS анимации значительно быстрее, чем jQuery. Однако на большинстве устройств и браузеров, которые я тестировал, GSAP на основе JavaScript работал даже лучше, чем CSS-анимации

Таким образом , CSS-преобразования быстрее, чем анимации jQuery, но не позволяйте этому заставить вас предположить, что CSS-преобразования быстрее, чем JavaScript . GSAP показывает, что JavaScript может превзойти CSS .

Native должен быть быстрее, но если разработчики браузера небрежны (или ленивы), они пишут плохой код, что приводит к плохим результатам с анимацией CSS (или переходами).


В настоящее время jQuery имеет плагин, который заменяет функцию «анимация» функцией «улучшенный». смотрите Velocity . Я не занимаюсь другими способами анимации DOM с помощью javascript, потому что это выходит за рамки этого вопроса.

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

Сверхплавные трансформации для jQuery

Недавно наткнулся на jQuery Transit, плагин для плавных трансформаций и переходов. Вместо работы с таймерами, плагин использует CSS3 трансформации.

Работает с тем же синтаксисом, что и animate, но вместо этого стоит использовать метод transition.

С более старыми браузерами новые эффекты не работают, а стандартные CSS будут меняться, хотя и без какой-либо анимации. Для того, чтобы откатиться обратно на animate, достаточно использовать следующее:

Читают сейчас

Похожие публикации

  • 29 сентября 2009 в 15:30

20 Fantastic Latest jQuery Plugins

jQuery plugin positioning v1.1

jQuery plugin positioning

Вакансии

AdBlock похитил этот баннер, но баннеры не зубы — отрастут

Комментарии 44

Upgrade jQuery’s .animate() method to use CSS3 Transitions in modern browsers.

Не очень понимаю, почему transition делает анимации сверхплавными. CSS Animation с 3D-ускорением ещё делает анимации быстрее, но обычный transition на текущих браузерах работает с той же скоростью.

Самое главное, что transition и CSS Animation добавили, чтобы мы не указывали анимацию в JavaScript, потому что тогда мы смешиваем CSS и JS-код. То есть в JS мы должны просто добавлять/убирать класс состояния, а то, как какое-то состояние выглядит и как определены переходы между состояниями указываем в CSS.

Поэтому этот плагин кажется мне странным. Хотите указывать анимации в transition — используйте CSS, а не JS.

Тогда используйте обычные jQuery-анимации. Использование transition не даёт никаких видимых преимуществ по скорости анимации.

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

Исключение только если у вас CSS-анимации перемешиваются с JS-анимация — но это решается тем, чтобы использовать requestAnimationFrame в JS-анимация.

Так же в некоторых браузерах аппаратно ускоряются анимации, которые заданы через CSS Animation и когда применяются 3D-трансформации. Но опять же, это не имеет никакого отношения к transition.

Так что transition рисуется так же плавно, как и jQuery-анимации.

И они решаются с помощью transition? Да ладно, transition не решает проблему перерисовок и перерассчёта стилей. JS-анимация тормозит только там, где тормозит обычный setTimeout.

Не верю, что на нетбуках тормозит setTimeout (то есть transition решит проблем). Нетбуки тормозят, так как им трудно быстро перерисовывать большие области экрана.

Я говорю лишь, что transition не делает анимацию плавнее, он только решает медленный setTimeout в iOS. Если анимация требует перерисовки большой области экрана (что чаще случается), то она будет тормозить одинаково, как на transition, так и на JS. Такие тормоза решаются совсем другими способами.

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

Само собой любая анимация рисуется покадрово (см. requestAnimationFrame). Скорость выполнения анимации = время работы таймера изменения свойств + время пересчёта вёрстки + время перерисовки страницы.

Аппаратное ускорение анимации ускоряет перерисовку страницы. Но перерисовка страницы одинакова как для CSS-анимаций, так и для JS-анимаций. Тем более, что аппаратное ускорение включается только если есть 3D-трансформации (так как есть определённые сайд-эффекты).

Что ускоряется при использовании CSS-анимаций, так это запуск таймера, подсчёт времени и вызов изменений свойств. Но на обычных компьютерах это время просто незаметно (я очень часто использую CSS-анимацию и пробовал переписывать тяжёлую анимацию с JS на CSS). На телефонах видимо из-за особенностей работы JS ВМ setTimout сильно тормозит (я думаю, что просто в iOS сильно увеличили минимальный период setTimeout).

В любом случае, это говорит лишь об оптимизиации браузера iOS (точнее о тормозах JS-анимация там, так как из-за другой реализации многозадачности в Android тормозов с JS-анимацией нет).

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

Смысл в том, что, например, если Вы хотите выполнить анимацию background image по позиции x, то в одних браузерах сработает css transitions, а в других $.animate(‘backgroundPositionX’, . ).

Таким образом, все равно придется JS.

Я пробовал писать библиотеку (без всяких jQuery), которая бы в новых браузерах делала анимацию присваиванием класса и CSS transition, а в старых — анимировала вручную по таймеру. В итоге получилось, что у меня и в Опере, и в Хроме CSS анимация хуже, глючнее и дерганней, чем яваскриптовая.

Идея была примерно такая: вызывать что-то вроде animateNode(node, < from: 'css-class1', to: 'css-class2', onFinish: function()<>>). А стили для анимации хранились бы в CSS, а не в JS коде, как это делается при использовании jQuery (что идеологически неправильно). В новых браузерах просто меняется класс, в старых запускается таймер, в совсем старых типа ИЕ6 анимация отключается, чтобы не тормозить браузер.

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

И да, здорово раздражает тот факт, что в отсталом w3c DOM нельзя получить примененные к элементу CSS-селекторы и стили (чтобы составить список для анимации). То есть, имея в стилях .some- >

Многоступенчатая анимация и плавные переходы

Дата публикации: 2015-12-22


От автора: концепция CSS анимации довольно проста. Задается название анимации, затем в @keyframes определяется список движений и в конце анимация крепится к какому-либо элементу. Если вы до сих пор не работали с данной технологией, можете ознакомиться прямо на нашем сайте в разделе Альманах.

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

Keyframe анимация может быть пошаговой

Если нам необходимо изменить цвет фона, скажем, с оранжевого на черный с помощью keyframe анимации при наведении на элемент курсора мыши за 5 секунд, алгоритм разобьет весь процесс анимации на отдельные шаги по времени и выполнит плавный переход.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Шагов анимации можно добавлять сколь угодно много. К примеру, ниже мы добавили между оранжевым и черным синий цвет.

В двух словах про многоступенчатую анимацию: от начала и до конца процесса более одной анимации.

Keyframe анимацию по желанию можно интерполировать и изменять

Посмотрите, как цвета выше переходят один в другой. Отличное свойство по умолчанию. Более того, цвета плавно переходят, как в animation-timing-function. Анимация намного более плавная и расслабляющая, чем при использовании linear. Хотя у каждого значения свое применение. С помощью функции steps() можно принудительно задать точное число шагов анимации. Демо:

Применение многоступенчатой анимации

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

Пять вертикальный столбцов, необходимо заставить их двигаться, манипулируя их высотой. Создадим анимацию с именем equalize из 25 шагов. Т.е. один шаг это 4% анимации, каждый шаг применяется к элементу .bar:

Отлично, но они двигаются одинаково, не самый крутой эквалайзер. При вызове анимации каждому .bar можно добавить свое значение animation-duration, создав таким образом эффект того, что они двигаются независимо друг от друга.

Во и все! Эквалайзер выглядит, как мы его задумывали, двигается в ритм музыке, а мы-то всего лишь используем все ту же самую многоступенчатую анимацию. В примере ниже я поигрался со значением animation-delay (отрицательные значения, колонки стартуют одновременно):

Мы чуть не забыли о многоступенчатых переходах!

Transition анимация немного проще. Анимация начинается с одного фиксированного набора свойств и заканчивается другим. Ниже короткий пример:

что быстрее? Переходы CSS3 или анимация jQuery? — jquery

Я работаю над приложением iPad HTML5, и я уже реализовал поддержку ontouch, чтобы быстрее запускать события, и я использую jQuery для легкого таргетинга элементов, но для анимаций я использую переходы CSS3

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

    1 11
  • 4 окт 2020 2020-10-04 05:46:09
  • Moisés Olmedo

11 ответов

CSS3 намного быстрее, так как он выполняет операции с графическим процессором. проверьте мой ответ на аналогичный вопрос в SO — ссылка

  • 4 окт 2020 2020-10-04 05:46:12
  • Sadanand

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

В настоящее время jQuery имеет плагин, который переопределяет функцию «анимация» с «улучшенной». см. Velocity. Я не использую другие способы анимации DOM с javascript, потому что это выходит за рамки этого вопроса.

Итак, as-is, jQuery медленнее, чем CSS. Кроме того, CSS легче писать, потому что у вас уже есть стиль элемента, поэтому добавление нескольких правил легко, по сравнению с ситуацией, когда вам нужно начинать писать JS где-то и управлять ею.. но для сложных, тяжелых вещей JS быстрее, к сожалению.

Очень хорошая статья об этом точном вопросе — http://davidwalsh.name/css-js-animation

  • 4 окт 2020 2020-10-04 05:46:12
  • vsync

Если вы используете jQuery/javascript анимацию с тегом canvas (который, если я не ошибаюсь, все равно полагается на таймер. новичок в игре с ним, хотя), то он дает вам преимущество аппаратного ускорения с javascript. Если вы просто хотите что-то перемещать, когда наводите курсор, переходы отлично работают. Переходы CSS могут работать немного плавнее, но это компромисс, вы отказываетесь от тонны javascript-контроля над анимацией с помощью переходов. Мне нравится сохранять стиль в CSS и поведение в JS — разве это не так, как он должен работать? Переходы CSS рода нарушили эту логику.

  • 4 окт 2020 2020-10-04 05:46:11
  • Aaron

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

WebKit (который включил Safari) также использует аппаратное ускоренное компоновку, которое может оказать гораздо большее влияние на производительность, чем все, что может сделать Javascript в это время. (Я думаю, что это очень скоро изменится, поскольку при управлении вычислениями добавлено больше функций). Это связано с тем, что он будет использовать специализированное оборудование, если оно доступно для выполнения вычислений, вместо того, чтобы это произошло с помощью переведенного языка, такого как Javascript.

Я не на 100% уверен, что WebKit на iPad аппаратно ускорен; однако это будет оправдано тем, что, поскольку оно стандартизировано и растет по популярности, это со временем улучшится.

  • 4 окт 2020 2020-10-04 05:46:11
  • Andrew Odri

Сравнение переходов CSS и анимации jQuery. Вместо того, чтобы периодически запускать таймер, переходы обрабатываются изначально браузером. В моем довольно ненаучном тестировании переходы всегда быстрее, работают с более высокая частота кадров, особенно с большим количеством элементов. Они также имеют преимущество в том, что цвета могут быть легко анимированы, вместо того, чтобы полагаться на плагинов.

Тест здесь и этот вывод.

Анимации Javascript, основанные на таймерах, никогда не могут быть такими быстрыми, как родные анимации, поскольку у них нет доступа к достаточному браузеру, чтобы сделать те же самые оптимизации. Эти анимации следует использовать в качестве резервной копии только в старых браузерах.

Также обратите внимание на this,

Анимированные анимации CSS3 являются ужасными, но используют много ваших процессоров мощность. Невозможно точно настроить анимацию с помощью CSS3 так же, как вы можете использовать как jQuery. Итак, до тех пор, пока CSS3-анимация не совместима с вашим процессором лучше придерживаться jQuery.

CSS3 переходы и JQuery анимация

Подборка самых популярных WordPress плагинов для любого сайта.

Здесь вы сможете скачать различные jQuery скрипты для любых проектов.

Бесплатно скачать CSS3 наработки с различными эффектами анимации.

Можно скачать файлы HTML5 с современными возможностями разработки.

Множество различных free PSD объектов для WEB-дизайна.

Колекция различных элементов form jQuery для вашего сайта.

Бесплатно скачать иконки для сайта в форматах PSD, PNG и так далее.

Коллекция всегда обновляющихся модальных окон на jQuery.

Разные примеры jQuery validate собраны в одном месте сайта.

Симпатичные варианты реализации ваших jQuery gallery.

Большой сборник широкоформатных и адаптивных jQuery slider`ов.

Ишите примеры реализации jQuery scroll? Это то, что вам нужно.

Красивые и динамичные всплывающие подсказки на jQuery и CSS3.

Интересные материалы на тему веб разработок, главные новости.

Подобрка плагинов Javascript, библиотек, фреймворков и т.д.

Коллекция потрясающих примеров анимации для вашего сайта.

Модернизация элементов форм, создание систем автозаполнения

Плагины для выбора и настройки даты и времени в формах

Предзагрузчики, анимация загрузки, перлоадеры и т.д.

Компоненты, содержащие в себе реализацию параллакс-эффекта.

Создание вкладок, оформление списков в удобную навигацию.

Все, что касается таблиц с данными: фильтр, сортировка и т.д.

Наработки SVG-графики и наложение на нее анимации. Просто красиво.

Отрисовка элементов на веб-странице с помощью html5 canvas.

Примеры элементов, которые реагируют при наведении на них.

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

Кнопки. Создание красивы и незабываемых кнопок для сайта.

Все, что касается сортировки данных на странице. Плагины html5.

Выборка данных. Множество примеров jQuery select.

Различные способы создания красивого и эффектного меню для сайта.

Дерево элементов. Построение множественных списков на странице.

Примеры объектов в трехмерном пространстве с помощью CSS3 и jQuery.

Крутые эффекты переходов с помощью CSS3 Masks

Три разных типа эффектов с несколькими уникальными переходами. Оригинальная идея для слайдера. Львиную доли возможностей берет на себя CSS3 и mask-свойства.

  • 3
  • 1 173

Крутые эффекты переходов с помощью CSS3 Masks

WowRating — плагин JS для создания рейтинга с крутыми эффектами

WowRating — это гибкий инструмент для создания кроссбраузерного рейтинга с «вау»-эффектом. В наборе предоставляются двенадцать различных анимаций для выставления оценки.

WowRating — плагин JS для создания рейтинга с крутыми эффектами

Креативные эффекты для бекграунда

Шесть крутых эффектов, которые сделают задний фон Вашего сайта уникальным. В примерах используется плагин anime.js и элементы SVG. Все выглядит довольно современно и качественно.

  • 7
  • 2 097

Креативные эффекты для бекграунда

Пять необычных SVG анимаций для текста

Качественная наработка анимированных символов с помощью SVG и JS. Ярко, интересно, креативно.

  • 2
  • 1 384

Пять необычных SVG анимаций для текста

Imagine — параллакс эффекты при прокручивании и параллакс-анимация

Мощный плагин на jQuery, который позволит Вам создавать потрясающие впечатления у пользователей при прокрутке Вашего сайта. Imagine — это плагин для анимирования любого элемента на странице.

  • 1
  • 2 787

Imagine — параллакс эффекты при прокручивании и параллакс-анимация

Granim.js — плагин JS для создания анимированных градиентов

Потрясающий инструмент для креативного оформления Вашего сайта. С помощью этой небольшой библиотеки можно создавать качественную анимацию из градиентов на заднем фоне. Основным плюсом является высокая производительность и легкость в настройке.

Понравилась статья? Поделиться с друзьями:
Все языки программирования для начинающих