Upload
others
View
19
Download
0
Embed Size (px)
Citation preview
Make a WorldJulia Muzafarova
Юлия МузафароваPure CSS Animator
julia_miocene miocene
7 демок
23 демки
1 место
22 демки
1 место
14 демок
3 место
7 демок
Зачем всё это?
Зачем всё это?Обучение
Проба нового
Развлечение
Следование моде
Поиск хайпа
00 Выбор графики
— плоская графика
— отсутствие сложных градиентов
— анимация без сильного изменения шейпов
— анимация за счет rotate(), skew() и translate()
— картинка должна нравиться
01 Таймлайн
Ключевые кадры в анимации отображают крайние состояния движения объекта
таймлайн
кадр
02 Архитектура
03 Рисование
РисованиеЭкономия объектов в DOM’е
РисованиеЭкономия объектов в DOM’е
Псевдоэлементы
Этого мало!
РисованиеЭкономия объектов в DOM’е
Псевдоэлементы
Комбинирование простых фигур
РисованиеЭкономия объектов в DOM’е
Псевдоэлементы
Комбинирование простых фигур
Градиенты и тени
РисованиеЭкономия объектов в DOM’е
Псевдоэлементы
Комбинирование простых фигур
Градиенты и тени
Глобальные стили
PerfectPixelPerfectPixel by WellDoneCode
Опорные точкиtransform-origin
04 Анимирование
Кадр — это сколько?
количествокадров
Кадр = 100%/330
Кадр = 0.3%
timing function
0% 100%50%
0% 100%50%
0% 100%50%
1 30
0px
300px
1 30
0px
300px
1 30
0px
300px
5 8 11 14 17 19 21 23 25 26272829
1 330
05 Отладка
Chrome DevTools
скорость проигрывания
пауза анимации
список анимированных объектов
таймлайн
06 Итог
Как попасть в топ
ждём
Спасибо