CSS transition может срабатывать только со второго раза в следующих случаях:
1. Отсутствие начального состояния: CSS transition требует начальное состояние для определения изменения, которое должно происходить. Если начальное состояние не задано или не определено явно, transition не будет работать до тех пор, пока не будет установлено начальное состояние.
2. Работа с динамическими свойствами: В случае, когда свойство, по которому должен срабатывать transition, определяется динамически (например, через JavaScript или в зависимости от пользовательского ввода), transition может не срабатывать при первом изменении. Это связано с тем, что браузеру требуется некоторое время для обработки и применения нового значения свойства. Следующие изменения будут срабатывать с transition как обычно.
3. Недостаточное время работы: CSS transition задает продолжительность (duration) анимации и время запуска (delay). Если продолжительность или задержка слишком короткие, transition может не успеть сработать до следующего изменения свойства. В таком случае, transition может начать срабатывать только со второго раза, когда следующий момент изменения свойства произойдет после завершения предыдущей анимации.
4. Проблемы с браузером: В редких случаях может возникнуть неожиданное поведение transition из-за ошибок в реализации браузером. В этом случае проблема может решиться обновлением браузера или использованием альтернативных способов анимации CSS, таких как CSS animations или JavaScript-based анимации.
Если у вас возникают проблемы с срабатыванием CSS transition, проверьте перечисленные выше возможные причины и убедитесь, что их нет. Если проблема остается, может потребоваться дополнительный анализ и диагностика вашего кода для определения конкретного причины и поиска решения.