CSS – Анимация интерфейсов

Научитесь создавать необычные эффекты и анимации при помощи встроенных возможностей в CSS 

CSS – Анимация интерфейсов
Цена
1259
Кэшбэк до 7.5%
29 уроков29 уроков
СертификатСертификат
РусскийРусский
Udemy
Купить с кэшбэком

Описание:

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

Возникал ли у Вас вопрос: "А как это сделано?"

Хотите научиться разбираться в этом и создавать подобное, чтобы привлекать внимание к своему сайту, сделать его необычным, интересным и запоминающимся? Тогда этот курс специально для Вас.

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

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

Чему вы научитесь

  • Понимать принципы создания эффектов и анимаций при помощи встроенных возможностей в CSS
  • Научитесь работать с CSS - Анимациями, Трансформациями и Переходами
  • Создавать необычные эффекты и анимации при помощи CSS
  • Комбинировать между собой эффекты и анимации
  • Развивать креативное мышление

Программа курса:

Введение

CSS - Переходы

  • CSS-Transitions – О главе
  • Свойство: transition-duration
  • Свойство: transition-delay
  • Свойство: transition-property
  • Свойство: transition-timing-function
  • Свойство: transition

CSS - Трансформации

  • СSS-Transformations – О главе
  • Функция: translate()
  • Функция: scale()
  • Функция: rotate()
  • Функция: skew()
  • Свойство: transform-origin
  • Особенности использования CSS - Трансформаций
  • Перемещение в 3D пространстве
  • Вращение в 3D пространстве
  • Свойство: perspective
  • Свойство: perspective-origin
  • Свойство: backface-visibility

CSS - Анимации

  • CSS-Animations – О главе
  • CSS-Анимации - начало использования
  • Подробнее про @keyframes
  • Свойство: animation-iteration-count
  • Свойство: animation-delay
  • Свойство: animation-direction
  • Свойство: animation-fill-mode
  • Свойство: animation-timing-function
  • Свойство: animation-play-state
  • Свойство: animation и подводим итоги