В данном уроке мы создадим визуальный эффект с помощью анимаций CSS3. В итоге должна получиться информационная панель, которая появляется с "отскоком".
Начало
Создаим документ HTML и добавим в него следующую структуру разметки для информационной панели.
<div class="css3-notification">
<p>Сообщение, которое появляется с отскоком.</p>
</div>
Добавим стили для формирования внешнего вида панели:
.css3-notification {
font-size: .8em;
text-align: center;
padding: 10px;
background-color: #111;
color: #fff;
box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, .3);
text-transform: uppercase;
position: relative;
font-weight: bold;
}
В браузере наша панель должна выглядеть так:
Создаем кадры анимации CSS3
Основная идея заключается в формировании серии последовательных отскоков с уменьшающейся амплитудой до полной остановки объекта.
Шаг 1. Создаем кадры анимации
Начнем с создания кадров анимации CSS3. В нашем примере набор кадров имеет название bounce.
@keyframes bounce {
}
В нашем уроке используется стандартный синтаксис @keyframe из стандарта W3C для сохранения наглядности кода. Но в реальном приложении для сохранения кросс-браузерности нужно использовать префиксы браузеров (-webkit-, -moz-, -o-), что вы можете увидеть в исходниках к уроку.
Шаг 2. определяем начальное положение
Сначала устанавливаем объект в верхнем положении. В трансформации CSS3 добавляем отрицательное значение для координаты по оси Y. Данное положение устанавливается от 0% до 5% временной шкалы анимации, то есть панель будет находится вверху очень недолго.
0% {
transform:translateY(-100%);
opacity: 0;
}
5% {
transform:translateY(-100%);
opacity: 0;
}
Шаг 3. Определяем первый отскок
Затем на интервале от 5% до 15% временной шкалы объект начинает движение в конечное положение. Устанавливаем для свойства translateY значение 0%.
Когда объект достигает конечного положения нижняя сторона должна деформироваться (имитируя последствия удара). В нашем случае уменьшим padding-bottom от 10px до 5px.
15% {
transform:translateY(0);
padding-bottom: 5px;
}
Объект отскакивает вверх после достижения поверхности. В данной точке объект подскакивает на максимальную высоту 50% в момент 30% временной шкалы.
30% {
transform:translateY(-50%);
}
Шаг 4. Определяем второй отскок
После достижения пика объект должен вернуться обратно в положение 0, то есть "упасть". Объект немного деформирован после предыдущего удара, поэтому мы уменьшаем свойство padding-bottom только до 6px.
40% {
transform:translateY(0%);
padding-bottom: 6px;
}
Теперь точка подъема будет располагаться ниже, чем в первый раз - 30% от текущего положения.
50% {
transform:translateY(-30%);
}
Шаг 5. Продолжаем отскакивать до полной остановки
События повторяются до конца анимации — от 70% до 100% временной шкалы анимации.
70% {
transform:translateY(0%);
padding-bottom: 7px;
}
80% {
transform:translateY(-15%);
}
90% {
transform:translateY(0%);
padding-bottom: 8px;
}
95% {
transform:translateY(-7%);
}
97% {
transform:translateY(0%);
padding-bottom: 9px;
}
99% {
transform:translateY(-3%);
}
100% {
transform:translateY(0);
padding-bottom: 9px;
opacity: 1;
}
Готово!