Как получить плавную ширину блока без прыжка, в то же время реагируя (как автоматическое поле) с различным левым и правым полем?

У меня есть вопрос CSS о блокировке левого / правого поля во время ответа. Мне нужно что-то вроде этого:

@media screen and (max-width: 1024px) {
  body .wrapper {
    width:100%;
  }
}
@media (min-width: 1024px) and (max-width: 1170px) {
  body .wrapper {
    width:70%;
     margin: 0% 5% 0% 25%;
  }
}
@media (min-width: 1170) and (max-width: 1600px) {
  body .wrapper {
    width:65%;
    margin: 0% 10% 0% 30%;
  }
}

HTML:

<body>
  <div class="wrapper">text here</wrapper>
</body>

Когда я изменяю ширину окна с 1024px, она скачет с левым полем 25%. Есть ли способ сделать так, чтобы с 1024px левый край плавно увеличивался (не скачок) в процентах, а при 1171px он достигал бы, например, 200px (левый край) при 1600px, 300px (например), как с автоматическим запасом. Например,

@media screen and (min-width: 1024px) {
      body .wrapper {
        width:1024px;
        margin:0 auto;
      }
    }

если окно увеличено, блок-обертка находится посередине, а левый и правый поля будут плавно увеличиваться с равным краем. Мне нужно то же самое, но с разным левым и правым полем. Это возможно? Буду признателен за вашу помощь.

Источник

1 ответ

Решение

Используйте что-то вроде этого, чтобы сделать переход плавным...

transition: 0.5s ease-in-out 0.5s;
Источник
Другие вопросы по тегам