Показать сообщение отдельно
  #4 (permalink)  
Старый 23.07.2019, 16:17
Новичок на форуме
Отправить личное сообщение для DimJavaScript Посмотреть профиль Найти все сообщения от DimJavaScript
 
Регистрация: 24.02.2016
Сообщений: 8

В общем, изначальный код работает.
Добавил, только:
Код:
<div class="smi">
 <div class="border"><img class="img_ba" src="/img/arc.png"></div>
 <div class="border bmid bmid_anim">
  <div class="smi_t">ONE</div>
 </div>
 <div class="border be"><img class="img_ba" src="/img/arc.png"></div>
</div>
Код:
.bmid { width: 0; }

.bmid_anim{
	animation-name: smMiddleOn;
	animation-timing-function: ease;
	animation-duration: 1s;
	animation-iteration-count: 1;
	animation-fill-mode: forwards; }

@keyframes smMiddleOn { to { width: auto; } }

Только один неприятный момент.
Если среднему диву ставлю widt: 100% — он принимает размер родителя.
Если ставлю auto — размер, как и должен быть в соответствии с содержимым, только duration перестаёт работать, т.к. конечный размер становится неопределён.

Что-то, я снова в тупике...


Последний раз редактировалось DimJavaScript, 23.07.2019 в 16:19.
Ответить с цитированием