Зверюшки на 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? Кроме косоглазия?
Ах, да, цветом! )