Ингредиенты:
Щепотка CSS
Капля воображения
Приготовление:
— Установите opacity: 0 и transform: translateX(100%), чтобы сделать элементы списка прозрачными и скрыть их.
— Укажите те же свойства перехода для элементов списка, кроме задержек.
— Используйте встроенные стили, чтобы указать значение --i для каждого элемента списка. Это, в свою очередь, будет использоваться для transition-delay для создания эффекта ступенчатости.
— Используйте селектор псевдокласса :checked для флажка, чтобы стилизовать элементы списка. Установите opacity на 1 и transform в translateX(0), чтобы они отображались.
???? Больше полезного для frontend-разработки на канале Frontend Formula