Невозможно запустить анимацию с auto
до Npx
из-за того, как создаются анимации.
Например, возьмите этот CSS:
.block {
width: 100px;
transition: width 2s;
}
.block:hover {
width: 200px;
}
Это было бы похоже на следующий код:
@keyframes animate-width {
from { width: 100px; }
to { width: 200px; }
}
.block {
width: 100px;
}
.block:hover {
animate: animate-width 2s;
}
Как вы можете видеть из ключевых кадров анимации, для того, чтобы создать подходящую анимацию, определены начальная и конечная точки.
Чтобы запустить анимацию, необходимо, чтобы начальная и конечная точки были доступны для механизма отображения CSS браузера для правильной работы. auto
никогда не может быть начальной точкой, поскольку это динамически назначенное значение.
Вы можете использовать Javascript для выполнения этой работы, установив правильную ширину после загрузки страницы. Для элементов блока установка ширины на 100% вместо auto
также может работать как решение.