Nikolay Talanov

Ну потому что css транзишены не работают с градиентами. Самый простой трюк - создаете псевдоэлемент :before/:after с фоном и его показываете через изменение opacity от 0 до 1 (таким же способом например "анимируют" переход от одного градиента к другому).

>не могу ни добавлять классы, ни менять их названия в html
>должен поддерживать работу ie8
>дизайн сайтов делается без дизайнера
>не могу использовать js

Как там в аду, неплохо живется?
Тут работу другую искать надо, а не деградировать в болоте, издеваясь на собой. Грамотный css невозможен без контроля над html и без адекватного дизайна (и общения с дизайнером, если речь идет о чем то сложнее говнолендинга). Ну а ие8 это вообще все равно что гроб засыпать не землей а говном. Я ие11 уже полгода+ не открывал и Edge чекаю "по желанию".

Общался на эту тему с некоторыми продвинутыми чуваками, они рассказывали как запиливали подобное. Если в кратце, то все решения представляют из себя жуткие костыли, когда в течении N милисекунд идет какой-то кастомный бенчмарк, на основе которого магическим образом определяется производительность и на основе этого делаются выводы. Но суть в том что полагаться на такую штуку плохая идея, ибо браузер, открывающий вкладку в фоне, такой бенчмарк завалит. И так далее тому подобное.
Так что просто забудьте о канвас свистоперделках на телефонах. Либо детектите конкретные версии IOS (ниже 9 например, что не соответствует флагманам) или андроид (хотя тут не поможет) и им не показывайте анимацию или давайте ее облегченную версию. Но это все костыли 99 уровня и за такое в аду для вас будет отдельная печь.

Немного пооффтоплю (но реленвантно в рамках "Карьеры"), но идти !тестировщиком! в какую-то очередную унылую снг контору и строить планы чтобы через ДВА-ТРИ года стать каким-то унылым "руководителем" это просто такая нереальная печаль, что мне даже стало интересно как вообще у людей настолько ужасные планы в жизни то появляются. За 2-3 года можно стать норм спецом, свалить из страны и получать в несколько раз больше, чем получает очередной мамкин руководитель отдела в фирме "рога и копыта". И уже потом там, в цивилизации, можно будет легко вырасти до какого-нибудь руководителя, если вы без подобных амбизиций не видите себя в этой жизни.

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

Я почти 2 недели назад сделал такую демку - codepen.io/suez/pen/AXQaEg, тут все намного плавнее и красивее, да еще и все реализовано с помощью css, js лишь 2 класса добавляет, но у меня правда отсутствует функционал слайдера, ибо концепт другой. Но можете изучить css чтобы понять как это дело работает.

Вам необходимость использовать Timeline в Chrome DevTools для профилирования производительности анимаций и не только.

Хотите знать основы оптимизации рендеринга - вам сюда https://www.udacity.com/course/browser-rendering-o...

Причин плохой оптимизации может быть вагон и маленькая тележка. У вас там могут огромные элементы анимироваться с помощью top/left вместо transform: translate, у вас при каждом скролле может идти repaint огромных картинок, забирая по 60-100мс на каждый шаг и так далее. Скорее всего причины крайне простые и связаны с использованием древних и убогих методик для анимаций, аля jQuery.animate (который до 3й версии юзает setTimeout вместо requestAnimationFrame под капотом).

Блоги не надо мониторить, надо подписаться на пачку дайджестов, и там вы найдете ссылочки на почти все достойные статьи, включая менее известных (но не менее крутых) товарищей.
Получать 5-10 писем с кучей ссылок в неделю намного проще и эффективнее, нежели чем чекать 10+ блогов, где апдейты бывают раз в 1-6 месяцев.

К сожалению никак. Баг старый, и его по виду вообще фиксить не пытаются даже.
Вот мой вопрос на SO из февраля прошлого года - stackoverflow.com/questions/28751990/firefox-bug-w...
Сам спросил, сам кое-как хакнул (в комментах пояснил + в ласт комменте ссылка на демку, там вроде тоже комментарии оставлены).
Я уже делал много демок с 3д трансформациями и множественным вложением элементов с transform-style: preserve-3d и каждый раз наступал на одни и те же грабли. Вот еще демка, в которой хакнуть не получилось, в итоге в фф все сломанное - codepen.io/suez/pen/WvaKpy А потом люди продолжают говорить что фф это хороший браузер для веб-разработчиков, что вызывает у меня больной смех.

Что касается вашей конкретной ситуации, то вам надо просто избегать нестинга элементов и разделять их по своим отдельным контейнерам с перспективой и так далее. То есть вам нет смысла держать 3 блока в 1 контейнере, просто сделайте 3 контейнера, задайте нужные z-index, а внутри каждого сделайте 3д-эффекта и они по идее не будут друг с другом пересекаться. Вообще с трансформами, z-index и сочетанием прочих свойств часто имеются проблемы, самый простой способ фиксинга это увеличение количества враппер-контейнеров. Лень вдаваться в детали, просто поверьте наслово, у меня большой опыт страданий в этой области :)

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

<svg>
  <use blah blah>
</svg>

Ну и для поддержки ИЕ9+ юзайте это https://github.com/Keyamoon/svgxuse (просто подключили на страницу и все работает).

Тут вот статья по иконкам в реакте - https://www.sitepoint.com/a-working-svg-workflow-f...
В ней в комментах имеется описание моего подхода (особенно пункт 4) - https://www.sitepoint.com/a-working-svg-workflow-f...