Спрайтовая анимация на CSS 3

[mgn]

А можно поподробнее, почему сработал трюк с увеличением, а анимация с исходными размерами работала с ошибками?

[ertaquo]

Потому что увеличение через transform влияет только на размеры. Это все равно, что лупу приложить. У элемента ширина 1 пиксель, но он отображается с растяжкой на ширину кадра. Так что в данном случае при анимации смещение идет на 1 пиксель, а не на 32 пикселя. Ну а дальше непонятно, какое поведение считать правильным: Webkit или Gecko. В первом скорее всего идет округление до целых пикселей, а во втором используются дробные значения, поэтому в Webkit анимация отображается нужными нам рывками, а в Gecko все так же сглаженно.

[asfd]

Я думаю анимация при помощи JS/Flash будет держать свои позиции даже после того как все браузеры станут поддерживать такую фичу. Потому что способ описанный вами представляет интерес только как «посмотрите, а вот мы и так умеем!», т.е. чисто академический интерес. На практике он совершенно не очевиден и плохо сопровождаем.

[ertaquo]

Конечно. Для кроссбраузерной подобной анимации в яваскрипте надо написать три строчки, а в css получается на два десятка строк и нифига не кроссбраузерно.

[Seldon]

Пока это только попытки реализовать стандарт, который ещё не утвержден (думаю и не скоро будет)

А помимо css сейчас активно продвигается svg и скажем это тоже конкурент!

и если честно Flash/js/css/svg они хороши для разных задачь! Простую анимацию адекватный человек не будет делать на флеше, а красивую игру сейчас объективно лучше делать на флеш и тд.

[Oreolek]

Ctrl + + превращают это в кошмар.

[q0p]

Потому что в backrgound-position значения задавать надо было не в пикселях, а в процентах — вы ведь об этом?

[beono]

Ctrl — - прикольнее :)

[TheShock]

Кстати, мне совершенно непонятно такое поведение. Если получать координаты курсора мыши, то они — мастабируются вместе с масштабом браузера. т.е., например, я увеличиваю всю страницу, а глаз как был 25-80, так и остался.

[ertaquo]

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

[Mew]

> В Firefox анимация так и останется плавной

щито? У меня как и в опере 1ый кадр. Откуда в фф анимация?

[ertaquo]

Если заменить префикс "-webkit-" на "-moz-", то будет анимация.

[Serator]

+ использовать нестабильную версию вроде Firefox Aurora 5 и т.п., ибо в текущей 4-ой версии css3 animation отсутствует.

[Timursan]

ссылка «порнография» разочаровывает :)

[equand]

а cpu как жрет-то :)

[saterenko]

2-3% в хроме на маке

[equand]

10 в хроме на q6600

[Goryn]

Мне кажется, спрайты нужно оставить для разработчиков игр и флеш-приложений. На веб-сайтах гораздо целесообразнее использовать обычную анимацию, будь то apng или gif. При меньших усилиях и размерах мы получим всё тот же результат. Apng, правда, далеко не кроссбраузерный, но, будем надеяться, это временно.

[Seldon]

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

[Skeaper]

Для меня ключевым стал последний абзац.

[pavel_manylov]

извините за оффтоп, но зачем вы мучаете php интерпретатор?

[TEHEK]

Налицо нецелевое использование ресурсов процессора. Нужно перерисовать один кадр 3 раза в секунду, а вы заставляете его делать ненужные вычисления, прорисовки и т.д.

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

[kolyuchii]

С помощью этой технологии можно создавать более качественную анимацию, чем это может предложить GIF-формат

[kolyuchii]

Видел нечто похожее у Вадима Макеева (http://pepelsbey.net/2010/12/darkbox-return/).