Эффект отскока на анимации CSS3

В данном уроке мы создадим визуальный эффект с помощью анимаций 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.

В нашем уроке используется стандартный синтаксис @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;
}


Готово!


Источник: http://feedproxy.google.com/~r/ruseller/CdHX/~3/IvtUjL1mQMQ/lessons.php

Читать комменты и комментировать

Добавить комментарий / отзыв



Защитный код
Обновить

Эффект отскока на анимации CSS3 | | 2013-02-28 10:36:48 | | Статьи Web-мастеру | | В данном уроке мы создадим визуальный эффект с помощью анимаций CSS3. В итоге должна получиться информационная панель, которая появляется с отскоком.НачалоСоздаим документ HTML и добавим в него | РэдЛайн, создание сайта, заказать сайт, разработка сайтов, реклама в Интернете, продвижение, маркетинговые исследования, дизайн студия, веб дизайн, раскрутка сайта, создать сайт компании, сделать сайт, создание сайтов, изготовление сайта, обслуживание сайтов, изготовление сайтов, заказать интернет сайт, создать сайт, изготовить сайт, разработка сайта, web студия, создание веб сайта, поддержка сайта, сайт на заказ, сопровождение сайта, дизайн сайта, сайт под ключ, заказ сайта, реклама сайта, хостинг, регистрация доменов, хабаровск, краснодар, москва, комсомольск |
 
Поделиться с друзьями: