Russian (Pусский) translation by Ellen Nelson (you can also view the original English article)
CodePen это отличное место для поиска вдохновения и, где можно посмотреть на безумные эксперименты с UI других людей. Более того, это также полезное место, где можно найти чему получится. В этой сводке мы рассмотрим некоторые классные примеры с CodePen, которые научат нас многому в веб анимации.
1. Как работают ключевые кадры – Keyframes
Этот CodePen показывает как браузеры следуют по ключевым кадрам (keyframe) в анимации.
2. Производительность в CSS анимации для начинающих
Когда мы делаем анимацию с помощью CSS, то получается обширное множество свойств анимации. Однако, не всё так хорошо. Анимирование с использованием неверных свойств может привести к медленной, бесполезной анимации. Этот пример от Ian Hazelton показывает, как работают наиболее эффективные 4 свойства.
3. Демонстрационная анимация с Keyframes
Иногда простой пример это всё что вам нужно. Этот пример показывает, как можно использовать синтаксис from и to в простом keyframe.
4. Демонстрация requestAnimationFrame
В этой JavaScript демонстрации от Matt West видно, как использовать requestAnimationFrame API для воспроизведения и паузы.
5. Как применять ChartJS
Большое количество комментариев, которые демонстрируют, как создать две анимированные диаграммы с использованием ChartJS.
6. HTML5 Canvas – Руководство для начинающих
Хорошо прокомментированы руководство по использованию Canvas, от Petr Tichy.
7. Преобразование GIF в CSS Анимации
А зачастую вам не нужно прибегать к использованию GIF, чтобы сделать модный эффект анимации. Эти примеры основанные только на CSS от Joey Cheng очень полезны для рассмотрения возможностей CSS анимации.
8. Примеры animateTransform
Chris Coyier демонстрирует как использовать SVG animateTransform.
9. CSS трансформирование: 3D пример и TransitionEnd
Часто полезно знать, когда завершилась анимация. В этом простом примере показано, как мы можем использовать JavaScript, чтобы определить окончание анимации.
10. Переключение Keyframes анимации в медиа запросах
Еще один отличный пример, который можно добавить закладки – показывает как мы можем изменить анимацию используя media запросы. Растяните окно, чтобы увидеть эффект!
Бонус: пути движения в CSS
И напоследок, давайте заглянем в будущее SVG анимации с этим примером, показывающим как свойство motion-path позволяет создавать сложные пути движения в наших анимациях.
Ну вот и всё!
Это всего лишь несколько примеров, блогов и демонстраций, доступных на CodePen. CodePen отлично подходит не только для анимации; попробуйте поискать, и вы найдете все виды отличной информации и демонстраций, охватывающие все возможные темы веб-разработки. Исследуйте, изучайте и получайте удовольствие!
Ещё ресурсы по анимации
By
