3

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

1
  • Ситуация такова, что если нужно быстро и не на долго (вскоре вновь поменяется дизайн) CSS3. Если же вы строите сам сайт как много все возможных анимаций и т.д. то js (написание гибкого движка). 11 авг 2015 в 9:02

3 ответа 3

1

Хорошо всё обстоит. Даже у keyframe'ов недавно избавились от префиксов. Ну и в Опере 12.1 беспрефиксынй вариант.

Если нужны IE9+, то css-анимации в самый раз. Если нужны keyframes, то IE10+.

А вообще, см. таблицы совместимости и пробуй:
http://caniuse.com/#feat=css-animation
https://developer.mozilla.org/ru/docs/Web/CSS/@keyframes

2
  • learn.javascript.ru/css-transitions - здесь кейфрейм в ie10 не сработал :(
    – Димка
    11 авг 2015 в 7:25
  • @Димка, там ещё и calc, и порядок префиксов неверный. Тащи эту штуку на jsfiddle и будем смотреть.
    – Qwertiy
    11 авг 2015 в 7:46
1

Сегодня возможности CSS достаточны для того, чтобы сделать любую анимацию интерфейса в большинстве браузеров. В этом вам помогут библиотеки вроде Animate.css. Кроме того уже сегодня можно достаточно спокойно задавать последовательность анимации используя keyframes и/или событие TransitionEnd.

В более сложных ситуациях (игры, реально сложные интерфейсы и т.п.), обычно используются анимации на Canvas или SVG. Что тоже вполне себе кроссбраузерно, для этого достаточно взглянуть на парочку библиотек: TweenMax, Paper.js

P.S. Не забывайте использовать автопрефиксер при сборке проекта, многие анимации до сих пор требуют -webkit/-moz

1
  • "многие анимации до сих пор требуют -webkit/-moz" - только -webkit в animation/keyframes и только в хромах непоследней свежести и сафари.
    – Qwertiy
    11 авг 2015 в 19:59
0

Насчет поддержки браузерами http://caniuse.com/#search=CSS3%20Transition CSS анимация в любом случае будет всегда более производительней чем JS. Если вам необходимо поддерживать ie9 и ниже, Вы всегда можете использовать Modernizr для определения возможностей браузера и уже потом решать, что и чем анимировать в данном случае.

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.