<div class="content-box">...текст, полученный с сервера...</div><div class="insert-content-here"></div><div class="content-box">...текст, полученный с сервера...</div><div class="insert-content-here"></div><div class="insert-content-here">
<div class="content-box">
...текст, полученный с сервера...
</div>
</div>
<div class="motions-block active"></div> - блокам с классом motions-block на js добавляется класс active и происходит анимация.motions-block {
visibility: hidden;
opacity: 0;
-webkit-transition: all 0.8s ease;
-moz-transition: all 0.8s ease;
-ms-transition: all 0.8s ease;
-o-transition: all 0.8s ease;
transition: all 0.8s ease;
-moz-transform: scale(0);
-ms-transform: scale(0);
-webkit-transform: scale(0);
-o-transform: scale(0);
transform: scale(0);
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
}.motions-block.active {
-moz-transform: scale(1);
-ms-transform: scale(1);
-webkit-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
opacity: 1;
visibility: visible;
}
<menu class="menuScroll">
<a href="portfolio.html" class="navBar active">ПервыйБлок</a>
<a href="price.html" class="navBar">ВторойБлок</a>
<a href="about.html" class="navBar">ТретийБлок</a>
<a href="index.html" class="navBar">ЧетвертыйБлок</a>
</menu>.navBar {
margin: 0 5px;
display: inline-block;
font-weight: 500;
padding: 12px 14px;
border: 1px solid black;
color: black;
background-color: #fff;
-webkit-transition: box-shadow 300ms ease-in-out, color 300ms ease-in-out;
transition: background-color 300ms ease-in-out, color 300ms ease-in-out;
-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
-webkit-tap-highlight-color: transparent;
max-height: 45px;
text-align: center;
text-decoration: none;
border-radius: 30px;
}
.active {
color: white !important;
border: 1px solid #fff;
background-color: #000;
}
.navBar и добавляете класс.active. Не убирайте .navBar, просто добавляйте или убирайте .active..active cвойство margin: 3px 5px 0; если убрать вовсе - то и высота кнопок не будет меняться.active уберите свойство padding - из-за того, что он отличается от padding в .navBar - текст внутри кнопки тоже скачет..active - тоже лишнее