Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Animation
Webdesign

10 примеров анимации на CodePen, из которых можно чему-то научиться.

by
Length:ShortLanguages:

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 отлично подходит не только для анимации; попробуйте поискать, и вы найдете все виды отличной информации и демонстраций, охватывающие все возможные темы веб-разработки. Исследуйте, изучайте и получайте удовольствие!

Ещё ресурсы по анимации

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.