CSS: Анімації, Трансформації та Переходи

Мова викладання в курсі – російська. Незабаром буде доступна українська версія цього курсу.

Відеозаписи лекцій без зворотного зв’язку та участі викладача. Ви отримаєте доступ до матеріалів одразу після оплати.

Чого ви навчитеся

• Розуміти принципи створення ефектів і анімацій за допомогою вбудованих можливостей у CSS
• Навчитеся працювати з CSS – Анімаціями, Трансформаціями та Переходами
• Створювати незвичайні ефекти й анімації за допомогою CSS
• Комбінувати між собою ефекти та анімації
• Розвивати креативне мислення

Вимоги

• Необхідно володіти базовими знаннями HTML і CSS
• Наявність комп’ютера з ОС Windows / Mac OS / Linux
• Наявність улюбленого редактора коду

Опис

Ви коли-небудь бачили на різних сайтах красиві ефекти або анімації?

Чи виникало у Вас запитання: “А як це зроблено?”

Хочете навчитися розбиратися в цьому і створювати подібне, щоб привертати увагу до свого сайту, зробити його незвичайним, цікавим і незабутнім?

Тоді цей курс спеціально для Вас.

Курс орієнтований на розробників, які вже володіють базовими знаннями HTML і CSS, водночас було б цікаво зануритися у світ ефектів і анімацій, а також навчитися їх створювати за допомогою CSS-Анімацій, Трансформацій і Переходів.

У цьому курсі ми розберемося в тому, як влаштовані CSS-Анімації, CSS-Трансформації (2D і 3D-трансформації) і CSS-Переходи, вони ж transitions, подивимося на роботу всіх властивостей, які стосуються їх, і закріпимо все це на спеціально підготовлених демках.

Зараховуйтеся на цей курс, вивчайте його і надихайтеся новими ідеями!

Для кого цей курс:

• Розробники, які хочуть зануритися у світ Web-ефектів та анімацій

Матеріали курсу, тривалість – 02:23:35
–
Вступ – 01:52
–
CSS – Переходи – 44:47
CSS-Transitions – 00:31
Властивість: transition-duration – 12:11
Властивість: transition-delay – 07:30
Властивість: transition-property – 06:17
Властивість: transition-timing-function – 09:58
Властивість: transition – 08:20
–
CSS – Трансформації – 54:50

СSS-Transformations – 00:35
Функція: translate() – 09:41
Функція: scale() – 05:45
Функція: rotate() – 03:02
Функція: skew() – 04:59
Властивість: transform-origin – 05:29
Особливості використання CSS – Трансформацій – 03:57
Переміщення в 3D просторі – 05:46
Обертання в 3D просторі – 05:06
Властивість: perspective – 05:38
Властивість: perspective-origin – 02:56
Властивість: backface-visibility – 01:56
–
CSS – Анімації – 42:06

CSS-Animations – 00:39
CSS-Анімації – початок використання – 08:28
Детальніше про @keyframes – 05:50
Властивість: animation-iteration-count – 03:39
Властивість: animation-delay – 03:52
Властивість: animation-direction – 05:14
Властивість: animation-fill-mode – 05:52
Властивість: animation-timing-function – 02:35
Властивість: animation-play-state – 03:37
Властивість: animation і підбиваємо підсумки – 02:20