Сергей Вирченко

как я говорил сгенерировать шрифты так выеживался... вот тебе: -webkit-font-smoothing: antialiased;
habrahabr.ru/post/122269

flex хорошо, но в ие не будет работать... а почему не сделать вот так:

<div>
         <p style="float:right">test</p>
         <button style="float:left">asdasdad</button>
</div>

добавь:
body {min-height: 100vh;position: relative}
footer {posiotion: absolute; bottom: 0; left: 0;}

и для .main сделай внизу отступ, чтобы футер не налазил

много вариантов, можно попробовать оттолкнуться от подобного:

<div style="position: relative">
	<div style="width: 1024px; margin: 0 auto">
		<div style="width: 500px; height: 100px; background: blue"> text</div>
	</div>
	<div style="height: 100px; width: 50%; position: absolute; right: 0; top:0; background: red;">img</div>
</div>

jQuery бери, на css без изменения структуры не получится

в коде особо не стал разбираться, но увидел сразу 2 вещи, которые не будут давать плавность:
1) transition: 1.5s; не указано свойство, которое вы хотите анимировать, а указано просто время, и желательно вид анимации указать (linear, ease и т.д.)
2) картинкам задан display: none; и transition здесь не поможет в плавном переключении в display: block; а будет резко это происходить

если блок определенного размера, а картинка динамическая и размер ее не известен, то обычно я делаю так:

<div class="table">
     <div class="table-cell">
           <img src="">
     </div>
</div>

.table{
     display: table;
     width: 500px; 
     height: 500px;
}
.table-cell{
    display: table-cell;
    vertical-align: middle;
}
.table-cell img{
    display: block;
    margin: 0 auto;
    max-width: 100%;
    max-height: 100%;
}

Пиши для "a" анимацию изменения цвета с 1s
.animation a{
animation: change-color 1s ease-out;
}
@keyframes chande-color{
..............
}