Значения свойств ease-in и ease-out , используемые для улучшения анимации движения, могут быть также названы трением и инерцией, результатами гравитации. Гравитацию еще можно рассматривать как настроение: тяжелое, пугающее и скучное или легкое, привлекательное и игривое. Создавая такие типы движения с помощью CSS, можно оживить сайт привлекательным движением.

Простой пример — отскакивающий мяч выше, движение которого может быть использовано для уведомления пользователя о критически важном сообщении. Разметка в этом случае — единственный блочный элемент, которому заданы стили и форма мяча:

#redball {
        border-radius: 50%;
        width: 20vw; height: 20vw;
        background-image: radial-gradient(ellipse farthest-corner at 25% 25%, #f00,#000);
        margin: 0 auto;
}

После этого следующий код CSS передвигает мяч с помощью некоторых значений, полученных Albie Brown, он показан без приставок производителей для ясности, в этом случае они почти нигде и не понадобятся для большинства современных версий браузеров:

@keyframes bounce {
        from, to {
                transform: translateY(30vh);
        }
        80% {
                transform: translateY(15vh);
        }
}

Единицы измерения vw и vh использованы для задания размеров мячу и его движению, чтобы оба эти значения были адаптивными в современных версиях браузеров без использования @media queries.

@keyframes bounce {
        from, to {
                transform: translateY(30vh);
        }
        80% {
                transform: translateY(15vh);
        }
}

Для вызова анимации мяча используется этот код CSS:

#redball {
        transform-origin: center bottom;
        animation: bounce 1.3s cubic-bezier(0.30, 2.40, 0.85, 2.50) infinite;
}

Обратите внимание на измененные значения свойства начала анимации для простоты расположения элемента, особенно если он отскакивает от другого объекта, а также для добавления реалистичности в следующем шаге.

Сама по себе анимация создает иллюзию гравитации, но не ее полное действие: мягкий предмет, такой как резиновый мяч, слегка сожмется при ударе о землю и расширится, отскакивая. Художник-мультипликатор Уолт Дисней называл это движением растягивания и сжатия, наиболее важным законом анимации. Художники используют его для придания персонажам и предметам жизненности и реалистичности. Его не сложно создать с помощью CSS, добавляя трансформацию масштабирования к уже имеющимся в анимации трансформациям CSS:

@keyframes bounce {
        from, to {
                transform: translateY(30vh) scaleY(.98);
        }
        80% {
                transform: translateY(15vh) scaleY(1.02);
        }
}

Насколько используется сжатие и растяжение, зависит частично от предмета и частично от стиля анимации: в некоторых видах анимации, таких как японская анимация аниме, используется гипертрофированная степень.

Конечно, в приведенной выше анимации остается нереалистичным то, что движение продолжается бесконечно.

Если Вы хотите придать анимации, над которой работаете, больше естественного движения, рекомендуем ознакомиться со следующими уроками:

- Готовимся к приходу осени: создание падающих листьев с использованием CSS, гравитации, смещения и реалистичных теней.

- Создание гипнотизирующей анимации с часами, с использованием вложенных анимаций, дуг и движения маятника.

Автор урока Dudley Storey

Перевод — Дежурка

Смотрите также:

• Готовимся к приходу осени: создание падающих листьев с использованием CSS
• Создание анимированных градиентов CSS3
• Создание анимированных подчеркиваний для ссылок