Трансформирование и анимация

Еще относительно недавно, чтобы реализовать любую анимацию на веб-странице, приходилось обращаться за помощью к языку JavaScript. Также для создания анимаций использовалась программа Adobe Flash. Но данные технологии весьма сложны и требуют отдельного изучения, поэтому в CSS3 появилась возможность создавать анимированные элементы без JS и сторонних программ. В этой главе мы расскажем, как это делается.

1. Свойство transform: трансформация элементов
   1. Функция rotate()
   2. Функция scale()
   3. Функция skew()
   4. Функция translate()
   5. Несколько значений свойства transform
   6. 3D-трансформации в CSS
2. CSS3 transition: плавные переходы
   1. Свойство transition-property
   2. Свойство transition-duration
   3. Свойство transition-timing-function
   4. Свойство transition-delay
   5. Сокращенная запись transition
3. CSS3-анимация
   1. Правило @keyframes
   2. Запуск анимации: аnimation-name и animation-duration
   3. Свойства animation-timing-function и animation-delay
   4. Свойство animation-iteration-count
   5. Свойство animation-direction
   6. Свойство animation-fill-mode
   7. Свойство animation-play-state
   8. Сокращенная запись animation
4. Практика: создание CSS-анимации