Николай

https://jsfiddle.net/LkLbfyfd/
display: flex

В простом случае - просто transform: scale и transition: transform;
Немного сложнее - сделать анимацию с кейфреймами (всё тот же scale).

Вторая ссылка - канвас, принцип - рисуем кучу кружочков, слушаем эвент mousemove, если расстояние от кружочка меньше Delta = задаём кружочку новое положение ( чтобы они как бы отталкивались).
Первая ссылка - огромная svgшка из треугольничков ( на самом деле можно взять один такой квадратик много раз его вывести, при mouseover эффекте треугольнику ставится fill, а благодаря transition он красиво мерцает.
Первый эффект мне нравится намного больше второго, т.к. не тащит за собой канвасину.

https://bugzilla.mozilla.org/show_bug.cgi?id=984869
Мозила в очередной раз умнее всех.
P.S. в конце концов они переоткрыли тикет и возможно всё таки пофиксят эту "фичу".
Как workaround можете использовать <input type="button"/>

Тут вам либо в сторону cssgrid посмотреть надо, либо группировать контейнеры, например 1 + 2 +3, 4 + 5 + 7 и 6 + 8

Нужно биндить не только click, но и touchstart эвент, чтобы работало на тачпадах. Иначе первый клик воспринимается как hover.

На скидку:
файл password.js
1. low, medium, high стоит оформить в виде enum'а.
2. методы класса перенести в прототип.
файл questions.js:
1. так же методы - в прототип
файл page.js
1. я бы разбил на два компонента - собственно форма придумывания пароля и и форма попыток ввода. Это два независимых блока ну и файликов к ним тоже 2.
2. не использовать id и поиск по id.
3. Прямая работа с DOM в реалиях 2016 года - это не очень хорошо. Хотелось бы какой-то data-binding видеть(тут уже что вам больше нравится).

По поводу функционала:
Стоит добавить какую-то случайность в процесс генерации пароля(те же большие/маленькие буквы неапример).