Image Image Image Image Image Image Image Image Image Image

Блог Indigo | 19.03.2024

Наверх

Наверх

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

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