Таблица 2 – Значения свойства animation-timing

1
Лабораторная работа 10. Анимация в CSS3 (продолжение)
Прочитайте теоретический материал по основам анимации CSS3,
изложенный в предыдущей лабораторной работе.
Свойство animation - это стенографическое свойство для шести свойств
анимации:
animation-name,
animation-duration,
animation-timing-function,
animation-delay, animation-iteration-count и animation-direction. В таблице 1
представлены свойства анимации CSS3.
Таблица 1 – Свойства анимации
Свойство
animation-name
Назначение
имя анимации
Синтаксис
animationname:название_анимации|none;
animation-duration: время;
animation-duration время проигрывания
анимации (s, ms)
animation-timing- метод расчета
animation-timing-function:
function
промежуточных значений значение;
свойств для анимации
animation-delay
задержка анимации
animation-delay: время;
animationколичество циклов
animation-iteration-count:
iteration-count
анимации
значение|infinite
animationнаправление анимации
animation-direction: normal
direction
alternate
animation-playпроигрывается ли
animation-play-state:
state
анимация или стоит на
paused|running;
паузе
Вендорные префиксы для разных браузеров: -webkit-; -moz-; -o-.
|
Свойство animation-timing-function использует кубическую кривую Безье,
для создания кривой скорости (табл. 2).
Таблица 2 – Значения свойства animation-timing-function
Значение
linear
ease
ease-in
ease-out
ease-in-out
cubicbezier(n,n,n,n)
Описание
Анимация имеет одинаковую скорость от начала до конца
Значение по умолчанию. Анимация начинается медленно,
затем ускоряется, перед завершением опять замедляется
Анимация имеет замедленное начало
Анимация имеет замедленное завершение
Анимация имеет замедленное начало и замедленное
завершение
Определение собственных значений в кубической функции
Безье. Допустимые значения от 0 до 1
2
Основным отличием анимаций CSS от переходов CSS является правило
@keyframes. Оно позволяет указать значения, которые должны быть у свойства
CSS в различные моменты анимации.
Пример
@keyframes fadeOut {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
.panel:hover {
animation-duration: 2s;
animation-name: fadeOut;
}
Задание 1
Создайте анимацию, имитирующую подпрыгивающий мячик.
1. В css разметке опишите параметры блока div, содержащего
изображение мяча, в том числе свойство -webkit-animation (см. табл. 1).
2. Используя свойство -webkit-transform:translateY(значение % со знаком
«минус»),
пропишите
кадры
анимации
в
соответствии
с
графиком,
представленном на рисунке 1.
Значение translateY()
120%
100%
80%
60%
40%
20%
0%
0%
20%
40%
60%
80%
100%
Рисунок 1 – Перемещение мяча по кадрам анимации
120%
3
Задание 2
Создайте анимированный фон.
1. Создайте или загрузите три однотипных изображения: мелкие
элементы на прозрачном фоне, как например, на рисунке 2.
500 х500 px
400 х400 px
300 х300 px
Рисунок 2 – Примеры изображений
2. Пропишите в css загрузку множественного фона:
body {
background-color: #6b92b9;
background-image: url('file1.png'), url('file2.png'), url('file3.png');
}
3. Установите кадры анимации:
@keyframes fon {
0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
50% {background-color:#b4cfe0;}
100% {background-position: 500px 1000px, 400px 400px, 300px 300px;
background-color:#6b92b9;}
}
Первый задает вид страницы до начала анимации, третий - после ее
завершения. Координаты для каждого из трех изображений разделяются
запятыми.
Размер изображения подобраны таким образом, чтобы получилась
иллюзия бесконечного плавного движения. Второе изображение имеет размер
400px Х 400px, поэтому второй фон смещается на 400px вниз в ходе анимации.
А третий фон по тому же принципу смещается на 300px. Первого изображение
нужно смещать несколько быстрее, поэтому его высота удваивается (1000px).
4
Благодаря умножению высоты на целое число, последний кадр соответствует
первому. Таким же образом смещаются изображения и по горизонтали.
4. Реализация анимации:
body {
background-color: #6b92b9;
background-image: url('snow.png'), url('snow3.png'), url('snow2.png');
animation: fon 20s linear infinite;
}
5. Измените параметры анимации для получения разных эффектов.