Главная страницаКатегория cssКурс по креативной CSS анимации, переходам и трансформации

Курс по креативной CSS анимации, переходам и трансформации

Name: Курс по креативной CSS анимации, переходам и трансформации
Price: 13 USD
Rating: 4.6 (33 reviews)

Creative CSS Animations, Transitions And Transforms Course

udemy

★4.6 (всего оценок - 33)

Продолжительность

5 ч 53 мин

Категория

CSS

Количество уроков

67 Видео

Дата добавления

8 мая 2020 г., 17:31

Язык

Английский

Дата выхода

27 дек. 2019 г., 20:24

Дата обновления

29 апр. 2026 г., 07:47

Креативные CSS-анимации сегодня — это не просто эффектный тренд. Это мощный инструмент, который усиливает пользовательский опыт, делает интерфейс живым и помогает веб‑разработчику выделяться на рынке. Этот курс поможет вам быстро и уверенно освоить все ключевые техники анимации, переходов и трансформаций в CSS — от базовых концепций до сложных творческих эффектов.

Что вы изучите в этом курсе

Курс построен так, чтобы постепенно провести вас от простого к сложному, обеспечив глубокое понимание и давая множество практических примеров.

Переходы (CSS Transitions)

Вы начнёте с основ — свойства transition. Узнаете, как правильно его использовать, какие параметры существуют и как с помощью переходов «оживлять» интерфейс, не прибегая к сложной логике.

Преобразования (CSS Transform)

На следующем этапе вы откроете для себя трансформации, которые позволяют изменять элементы в 2D и 3D пространстве: перемещать, масштабировать, вращать и многое другое.

Темы, которые вы освоите:

2D-трансформации: translate, scale, rotate, skew
3D-трансформации: перспектива, вращения в пространстве
Комбинирование нескольких эффектов

Практические творческие примеры

После изучения основ вы перейдёте к созданию эффектных визуальных решений, которые легко применить в реальных проектах.

Вы создадите:

анимированные эффекты наведения для кнопок;
динамичные эффекты наведения для изображений;
креативные композиции с сочетанием transform + transition;
множество мини-проектов, которые можно использовать в портфолио.

Анимации и ключевые кадры (CSS Animation + Keyframes)

В этой части курса вы полностью раскроете потенциал CSS-анимаций: изучите ключевые кадры, параметры анимации и научитесь управлять сложными движениями элементов.

Основные навыки:

создание и настройка ключевых кадров;
работа с timing-function, iteration-count, direction и др.;
создание цепочек и комбинированных анимаций;
анимация состояния интерфейса и декоративных элементов.

Что вы получите после прохождения курса

По итогу обучения вы:

поймёте, как работает любая веб‑анимация на CSS;
создадите более 40 самостоятельных анимационных проектов;
научитесь мыслить творчески и применять эффекты осознанно;
сможете выделяться среди других веб‑разработчиков благодаря уникальным визуальным решениям.

Для кого подходит этот курс

начинающих веб‑разработчиков, желающих улучшить визуальную составляющую своих проектов;
front-end специалистов, стремящихся прокачать навыки анимации;
дизайнеров, работающих с прототипами и анимацией интерфейсов;
всех, кто хочет научиться создавать эффектные и функциональные анимации без JavaScript.

Почему этот курс эффективен

Курс построен на практике: каждый новый блок сопровождается примерами, которые вы создаёте вместе с автором. Такой формат помогает не просто понять материал, но и закрепить его на деле, получая реальные навыки, а не теорию «в вакууме».

Присоединяйтесь к обучению и начните создавать анимации, которые впечатляют и превращают обычные сайты в современные, динамичные и удобные интерфейсы.

Это пробный урок. Оформите подписку, чтобы получить доступ ко всем материалам курса. Премиум

Урок 1. 00:03:00
introduction
Урок 2. 00:03:09
what is css transitions ?
Урок 3. 00:06:01
transitions options
Урок 4. 00:05:46
different ways to write the transition property
Урок 5. 00:01:55
what properties can be transitioned
Урок 6. 00:01:38
2D transforms basics
Урок 7. 00:04:57
tranlsate function
Урок 8. 00:03:43
scale function
Урок 9. 00:02:46
rotate function
Урок 10. 00:02:18
skew function
Урок 11. 00:06:25
transform origin
Урок 12. 00:05:36
translate in 3D
Урок 13. 00:03:04
rotate in 3D
Урок 14. 00:02:50
what we are going to build in this section with css transforms and transitions
Урок 15. 00:06:49
creative button hover effect 1
Урок 16. 00:07:45
creative button hover effect 2
Урок 17. 00:06:17
creative button hover effect 3
Урок 18. 00:02:32
creative button hover effect 4
Урок 19. 00:02:45
creative button hover effect 5
Урок 20. 00:05:11
creative button hover effect 6
Урок 21. 00:05:39
creative button hover effect 7
Урок 22. 00:05:10
creative button hover effect 8
Урок 23. 00:09:59
creative button hover effect 9
Урок 24. 00:07:15
creative button hover effect 10
Урок 25. 00:06:23
creative button hover effect 11
Урок 26. 00:07:29
creative button hover effect 12
Урок 27. 00:14:33
creative button hover effect 13
Урок 28. 00:07:57
creative button hover effect 14
Урок 29. 00:08:08
image hover effect with css transforms 1
Урок 30. 00:03:49
image hover effect with css transforms 2
Урок 31. 00:02:36
image hover effect with css transforms 3
Урок 32. 00:02:29
image hover effect with css transforms 4
Урок 33. 00:12:24
image hover effect with css transforms 5
Урок 34. 00:05:04
smoky text effect using css transforms
Урок 35. 00:03:21
Fill Text Effect On Hover
Урок 36. 00:02:27
image zoom in effect using css transforms
Урок 37. 00:05:40
menu hover effect with css transforms
Урок 38. 00:09:46
menu hover effect with css transitions
Урок 39. 00:09:51
social media icons hover effect with css transforms
Урок 40. 00:03:32
animation introduction
Урок 41. 00:04:56
create css animations with more stages
Урок 42. 00:06:24
animation fill mode property
Урок 43. 00:03:44
animation iteration count property
Урок 44. 00:02:58
animation direction property
Урок 45. 00:01:47
animation shorthand method
Урок 46. 00:01:12
what we are going to build in this section with css animations
Урок 47. 00:03:46
floating text using css animation
Урок 48. 00:04:15
loading effect using css animation
Урок 49. 00:04:57
driving a car and a motor bike using css animation
Урок 50. 00:02:42
text rotator using css animation
Урок 51. 00:03:47
animated image pattern using css animation
Урок 52. 00:03:55
button shaking hover effect with css animation
Урок 53. 00:06:50
animated button with css animation
Урок 54. 00:05:21
lighting text with css animation
Урок 55. 00:07:12
heartbeat with css animation
Урок 56. 00:02:55
animated text background with css animation
Урок 57. 00:06:29
bouncing balls with css animation
Урок 58. 00:03:14
rain effect with css animation
Урок 59. 00:08:22
Icon Hover Effects with CSS Animations
Урок 60. 00:06:52
Loading Text Animation
Урок 61. 00:06:36
awesome pulse effect using css animations
Урок 62. 00:02:40
Simple Images Slider Show with css animations
Урок 63. 00:04:29
Changing background color with css animations
Урок 64. 00:10:25
newton's cradle with CSS animations
Урок 65. 00:09:50
nice loading effect with CSS animations
Урок 66. 00:05:29
nice loading effect with CSS animations 2
Урок 67. 00:04:11
nice preloader using CSS animations

Автор - udemy

udemy

Udemy — одна из самых масштабных платформ в мире, предлагающая обучающий контент от авторов и экспертов со всего света. Сервис объединяет миллионы учеников и десятки тысяч преподавателей, создающих курсы на самые разнообразные темы.Основные возможности платформыШирокий выбор тем: от программирования и дизайна до маркетинга, психологии и личной эффективности.Глобальное сообщество авторов: материалы создаются специалистами из разных стран.Удобный ф

+198