как правило каждая такая фишка - это просто переключение класса. остальное сделает за тебя transition или animation
1. в случае с чекбоксом можно просто написать
input { clip чтобы скрыть базовый чекбокс }
input + label { лейбл }
input + label:before { стили чекбокса }
input ~ .dropdown { закрытый дропдаун }
input:checked + label:before { стили нажатого чекбокса }
input:checked ~ .dropdown { открытый дропдаун }
для этого чекбокс не должен быть вложен куда либо
<input id="ch1" type="checkbox"
<label for="ch1"
<div class="dropdown"
2. в случае с флагом - масштабирование , прозрачность, точка центра трансформаций и просто функция Безье (лучше их смотреть по кривым) с пиком выше 1
тут уже необходимо переключение класса типа @open@
PS готов сделать если нужно :)
и stripe.com (анимация при нажатии на иконку флага USA)
Простой
