Денис Т

Для начала, ответ на вопрос - да, частое использование transition в css может лагать сайт

Анимации могут добатить лагов, если сделаны без понимания сути работы механизма. В частности самыми дешевыми на данный момент (применимо к chrome и частично firefox, не могу сказать за IE и Edge) являются анимации свойств opacity, различные transform: translate, scale, rotate.
Последнее время в этих вопросах я почитываю различные метериалы от инженера Google Paul Lewis'а, вот ссылки на несколько материалов:
Статья из его личного блога по animation performance
Статья по animation performance совместно с Paul Irish
Нереально крутой туториал по параллаксу, от которо...
Плейлист в Google Developers на Youtube, где Пол и...

@media only screen and (max-width: 480px) {
  #footer {display:none;}
}

Юзаем media query, показываем оверлей с просьбой перевернуть телефон

outline: none

Вообще такое можно реализовать на SVG, если есть возможность.
А так, по теме:
codepen.io/jo-asakura/pen/stFHi

Я в своих проектах использую такое:

*, :after, :before {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

Migx

codepen.io подойдет? если у вас на заднем плане картинка, то копайте в сторону SVG

caniuse.com/#search=clip-path
https://css-tricks.com/clipping-masking-css/

Для однотонного цвета достаточно before и after. Для картинки clip-path.

Javascript
https://learn.javascript.ru/
https://karmazzin.gitbooks.io/eloquentjavascript_r...
eloquentjavascript.net
bonsaiden.github.io/JavaScript-Garden/ru
largescalejs.ru
bakhirev.biz/book