Можно ли реализовать такую анимацию на чистом CSS3, без JS?

Question

[evgeny_ryabcev]

и stripe.com (анимация при нажатии на иконку флага USA)

Может где-то встречали исходники подобных анимаций?

Answer 1

[A K]

Вот каркас js+css3, надеюсь, сами стилизируете:
Symphony/cb5mssd7/

Редактирую свой ответ, потому что многих волнует этот вопрос — решил сделать на css.
Пожалуйста, новое решение онли css:
jsfiddle.net/Symphony/pqwhthsm

Comments

[evgeny_ryabcev]

Спасибо большое! И еще, галочка на checkbox-e тоже анимированно появляется и исчезает. Это как реализуется, может плагин какой-то?

[A K]

evgeny_ryabcev: jsfiddle.net/Symphony/eponnmau - это без картинок, но можно использовать картинку вместо моей галочки

[evgeny_ryabcev]

Symphony Очень благодарен вам!

[A K]

evgeny_ryabcev: клик «Ответ является решением» — облегчите жизнь другим

[evgeny_ryabcev]

Symphony: Точно, забыл совсем)

[A K]

evgeny_ryabcev: редактировал ответ, теперь онли css

[evgeny_ryabcev]

Symphony: спасибо ;)

[evgeny_ryabcev]

Symphony: вы это с помощью какого-то генератора делали?

[A K]

evgeny_ryabcev:

[evgeny_ryabcev]

Symphony: +1)

[# a r t u r #]

Symphony: Спасибо!

[Артем Меньшов]

Да вы просто бог всея всего! Спасибо!

Answer 2

[SerzN1]

как правило каждая такая фишка - это просто переключение класса. остальное сделает за тебя 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 готов сделать если нужно :)

Answer 3

[suslik2015]

Это не сложно. Принцип хорошо рассказан здесь

Comments

[evgeny_ryabcev]

Спасибо большое! ;)