Зверюшки на CSS3 transitions & transforms

[shebanoff]

Было бы очень хорошо сопроводить пост страничкой с готовым кодом.

[shebanoff]

Простых примеров на jsfiddle.net было бы достаточно.

[Carduelis]

Спасибо, добавил в пост!

[shebanoff]

И еще один артефакт: у зверюшек в Chrome странно дергаются скулы во время анимации. В Firefox и Safari такого не наблюдается. Тестил в браузерах под Mac.

[Carduelis]

Да-да, я это тоже заметил. Судя по всему из-за border-radius

[CyberAP]

Это из-за аппаратного ускорения. transition + transform дают такой эффект.

[shebanoff]

Я тут подумал, что поэкспериментировав с transition-easing, можно придать зверушкам разный «вес», когда они прыгают.

[k0ldbl00d]

А по-моему щенок — это косоглазый медведь.

[imater]

Практикуйтесь, скоро олимпиада в сочи.

[all4you4]

Лисичка больше демона напоминает, тянущегося на ручки.

[iago]

Хоть я ничего не понимаю в CSS3, но жена открыла эту статью и досмерти закликала зверюшек :) Вы не представляете, сколько принести нам позитива после тяжёлого трудового дня! Да будет карма ваша светлой!

[Carduelis]

Очень приятно слышать, что кому-то это действительно подарило пару приятных мгновений жизни)

[Operatino]

Свойства -ms-transition не существует, зачем вы анимаруете постоянно «all» а не только нужные свойства?

По псевдоклассу :active, вам вероятно поможет моя статья.

[Carduelis]

Спасибо за наводку. По поводу свойства all все верно

[Operatino]

Вопрос в том, что не нужно просто так анимаировать сразу все свойства, лучше перечислять необходимые.

[Carduelis]

Не, я не всмысле что свойство «all» неправильное, я к тому, что вы верно подметили.
Действительно, везде анимации подвергается лишь одно свойство: либо это высота, либо градус поворота.

[Badevlad]

Стесняюсь спрашивать, но все же… Чем отличается Bear от Puppy? Кроме косоглазия?
Ах, да, цветом! )