$start_time = 1538388000; /* стартовое время отсчтеа 01-10-2018 */
$time = time(); /* текущее время */
$end_time = 1540892639; /* время окончания 30-10-2018 */
$diff_time = ($end_time-$start_time); /* разница времени между 01-10-2018 и 30-10-2018 */
$left_time = ($end_time-$time); /* осталось время до 30-10-2018 */
$left_procent = round((($left_time/$diff_time)*100), 0); /* осталось времени в % между интервалом 01-10-2018 и 30-10-2018 */
echo $left_procent.'%';$start_time будет текущее время, то и результат всегда будет 100% 
Хотелось бы оптимизировать все классыэто называется не оптимизация, а «я нифига не понимаю че происходит»
<div class="class_3 class_2"></div> // 1px<div class="class_3 class_2"></div> // 2px
foo.x = foo = {n: 2};foo.x = (foo = {n: 2});{ n: 2 }.let foo = {};
const bar = foo;
foo.x = (foo = {n: 2});
console.log(foo.x === undefined); // true
console.log(bar); // { x: { n: 2 } }
console.log(bar.x === foo); // truefoo.x = - присваивание свойства конкретному объекту. На момент вызова в нашем примере это {}.foo = - присваивание значения самому идентификатору foo. Это может быть примитив, ссылка на объект или функцию. В нашем случае это объект { n: 2 }. 
.box:hover .box-inner{
margin-top:-360px;
position: relative;
box-sizing: border-box;
transition: all 500ms ease;
}
.box-inner{
transition: all 500ms ease;
}
При наведении происходят непонятные скачки
.box-inner завязано на его же :hover, так что когда он уезжает из-под курсора, состояние :hover теряется, элемент откатывается назад, под курсор, снова случается :hover, элемент опять едет вверх, ну и т.д. Надо смотреть :hover у элемента, который из-под курсора никуда не девается, т.е., у родительского:.box:hover .box-inner {
margin-top: -360px;
}Также, как сделать, чтобы при убирании курсора все возвращалось обратно плавно, а не резким скачком?
transition должен присутствовать у элемента вне зависимости от наличия состояния :hover:.box-inner {
transition: all 500ms ease;
}