Проблема, с которой вы сталкиваетесь, связана с тем, что свойство transition не работает при адаптации на первом скачке.
Transition позволяет создавать плавные анимации при изменении значения CSS-свойств. Оно задает эффект перехода между начальным и конечным значениями свойств при изменении их значений. Однако, если у вас есть изменения при адаптации сайта с маленького на большое устройство, transition может не сработать на первом скачке.
Это происходит из-за того, что браузеры, как часть процесса адаптации, сначала перерисовывают элементы с новыми значениями CSS-свойств и только после этого применяют transition. В результате, браузер не видит изменения значения свойства и не может применить эффект перехода.
Есть несколько способов решить эту проблему:
1. Попробуйте добавить небольшую задержку перед применением нового значения свойства. Это может помочь браузеру "увидеть" изменение значения и применить transition. Например, вы можете использовать setTimeout() с задержкой в несколько миллисекунд.
2. Используйте CSS-свойство opacity вместо видимости (visibility) или отображения (display). Переходы в свойствах opacity обычно работают более стабильно.
3. Если у вас есть доступ к JavaScript, вы можете применить изменение значений CSS-свойств с помощью JavaScript вместо классов CSS. Это позволит контролировать переходы и применить их сразу после изменения значения свойства.
Применение одного из этих подходов может помочь вам исправить проблему с transition при адаптации на первом скачке и создать плавные анимации при изменении CSS-свойств.