Чтобы анимация `transition` срабатывала при изменении состояния кастомного checkbox, вам нужно правильно использовать CSS свойства и учесть состояние `:checked`. Ниже приведены основные шаги и пример кода, который поможет вам добиться нужного эффекта.
1. Используйте псевдокласс `:checked` для применения стилей к checkbox и его маркеру (например, фоновому изображению или цвету) при активированном состоянии.
2. Настройте `transition` для свойства, которое вы хотите анимировать.
Вот пример кода:
```html
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Custom Checkbox with Transition</title>
<style>
.checkbox {
display: none; /* Скрываем оригинальный checkbox */
}
.custom-checkbox {
width: 20px;
height: 20px;
border: 2px solid #007BFF;
display: inline-block;
position: relative;
cursor: pointer;
transition: background-color 0.3s, border-color 0.3s; /* Плавный переход */
}
.custom-checkbox:before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: transparent; /* Начальный фон */
transition: background 0.3s; /* Плавное появление */
}
.checkbox:checked + .custom-checkbox:before {
background: #007BFF; /* Цвет фона при активности */
}
.checkbox:checked + .custom-checkbox {
border-color: #0056b3; /* Изменение границы при активности */
}
</style>
</head>
<body>
<label>
<input type="checkbox" class="checkbox">
<span class="custom-checkbox"></span>
Кастомный Checkbox
</label>
</body>
</html>
```
### Как это работает:
1. В данном коде мы скрыли оригинальный checkbox с помощью `display: none;`.
2. Создали элемент `<span>` с классом `.custom-checkbox`, который будет выглядеть как checkbox.
3. Используем псевдоэлемент `:before` для создания фона, который будет анимироваться.
4. При использовании псевдокласса `:checked` на скрытом checkbox, мы меняем фон и цвет границы кастомного элемента, обеспечивая плавный переход с помощью свойства `transition`.
Теперь, когда вы кликаете на кастомный checkbox, анимация будет плавной, и фон маркера будет изменяться с использованием настроенного перехода. Вы можете менять цвет и размеры в зависимости от ваших предпочтений.