Is it possible to implement such an animation in pure CSS3, without JS?

Question

css

and stripe.com (animation when you click on the USA flag icon) Have
you seen the source codes of such animations somewhere?

Answer 1

Here is the js + css3 skeleton , I hope you style it yourself:
Symphony/cb5mssd7/
Editing my answer, because many people care about this issue - I decided to do it in css.
Please new solution only css :
jsfiddle.net/Symphony/pqwhthsm

Answer 2

As a rule, each such feature is just a class switch. the rest will be done for you by transition or animation
1. in the case of a checkbox, you can simply write

input { clip чтобы скрыть базовый чекбокс }
input + label { лейбл }
input + label:before { стили чекбокса }
input ~ .dropdown { закрытый дропдаун }

input:checked + label:before { стили нажатого чекбокса }
input:checked ~ .dropdown { открытый дропдаун }

for this, the checkbox should not be nested anywhere

<input id="ch1" type="checkbox"
<label for="ch1"
<div class="dropdown"

2. in the case of the flag - scaling, transparency, a point of the center of transformations and just a Bezier function (it is better to look at them along the curves) with a peak above 1
, it is already necessary to switch the class like @[email protected]
PS is ready to do if necessary :)

Answer 3

It's not hard. The principle is well explained here