Как навесить анимацию на соседние элементы?

Question

[vetsmen]

Есть input, при фокусе плавно увеличиваю его ширину (накидываю transition), однако соседние элементы сдвигаются при расширении input без анимации. Почему так происходит? И как сделать, чтобы он так же плавно сдвигался?

Answer 1

[aloky]

можно transform, но легче было бы вам помочь, если вы кинули код

Comments

[vetsmen]

А что с transform делать? Вырвать код возможности нет, там банальная конструкция:

<div class="input_block"><input type="text" class="istyle"></div>
<div class="info"><span>Информация</span></div>

.input_block, .info { display: inline-block; float: right; transition: all 0.2s ease;  }
.info { width: 100px; height: 100px; }
.istyle { width: 100px; height: 20px; }
.istyle:focus { width: 200px; transition: all 0.2s ease;  }

[mr_dev1l]

transition нужно указать в основном классе, а не в фокусе

.istyle { width: 100px; height: 20px; transition: all 0.2s ease; }

Answer 2

[bpGusar]

а transition на соседние элементы не пробовал?

Comments

[vetsmen]

Накидывал, результата 0

[bpGusar]

попробуй на них пропиши

position: relative;
transition: all .15s

[vetsmen]

bpGusar, все так и прописано

[vetsmen]

bpGusar, дело в том, что это не js анимация, где атрибуты стилей у элемента изменяется плавно с течением времени. transition работает как-то подругому.