Nikolay Talanov

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

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

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

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

Я почти 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 под капотом).

К сожалению никак. Баг старый, и его по виду вообще фиксить не пытаются даже.
Вот мой вопрос на 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 и сочетанием прочих свойств часто имеются проблемы, самый простой способ фиксинга это увеличение количества враппер-контейнеров. Лень вдаваться в детали, просто поверьте наслово, у меня большой опыт страданий в этой области :)

Оценивать надо исходя из вашего желаемого часового рейта. И все.
Ко мне если обратяться с просьбой сделать что-то простое, что требует N часов работы, то я и скажу им что это будет стоить N * hour-rate. При этом я естественно предупрежу людей, что обращаться ко мне с созданием чего-то простого нецелесообразно, ибо огромное количество более низкоспециализированных людей сможет это сделать за N * hour-rate/5 (или /10).
Все остальные критерии не имеют никакого значения. Сложно это или нет. Это рыночные отношения, где все крутится вокруг спроса и предложения.

Вариант с гиф это совсем уж извращение.
1 вариант по идее можно сделать с помощью svg gooey фильтра (комбинация блюра с контрастом, которая дает эффект перетекания).
Но чаще всего такое делают либо с помощью спрайтов (устаревший, но простой вариант), либо с помощью bodymovin (js плагин для After Effect, вы экспортите анимацию из AE и юзаете в нем).
Ну и конечно есть вариант такое руками с помощью SVG запилить, но это крайне нерациональный подход на фоне того что я описал выше.

1) Серый css-треугольник с помощью :after.
2) Css clip-path (не пашет в ие и ФФ)
3) Svg clip-path (слегка геморройно и не очень легко сделать идеально растягиваемым под все разрешения с сохранением пропорций).
4) Еще есть варианты с псевдоэлементами и трансформами (skew/rotate и так далее), с помощью которых можно юзать не только монотонный бэкграунд, но и картинки. На тостере уже миллион раз подобные вопросы были.

Мешанина из классов в html - расстрелять. Надо юзать миксины/экстенды, а в хтмл держать БЕМ классы и некоторые клювые лэйаут классы иногда.

У них это сделано на канвасе. То есть 3 бэкграунда для блока просто фоном сделаны канвасом, который реагирует на движения мышью. Есть конечно вариант сделать такое на свг, но там могут быть проблемы с адаптивностью и сохранением адекватного aspect ratio (даже со спец атрибутами viewBox и preserveAspectRatio можно будет помучаться).
У меня имеется несколько демок с похожим эффектом (на свг):
codepen.io/suez/pen/emjwvP - вот тут простой drag effect, который просто меняет одну координату арки.
codepen.io/suez/pen/epgZjK - вот тут более продвинутый пример, где я уже юзаю Cubic Bezier Curve, а не арку или квадратичную Безье.
У меня варианты на rAF велосипедах, с гсапом это все дело должно быть явно проще.

Если речь идет о столь примитивном сайте, то без разницы.

% для марджинов и паддингов берутся от ширины элемента, даже если речь идет о margin-top/padding-bot и так далее.

Бордер топ и лефт для блока
:before:after для линий снизу и справа.
Ну или еще миллион вариантов.