Как использовать CSS3 и Photoshop для анимации объектов

2014-07-27

На самых ранних этапах развития CSS-анимации мы вынуждены были ограничиваться только эффектами наложения. Благодаря возможностям CSS3-анимации, теперь мы можем создавать удивительные эффекты без использования плагинов JavaScript.

Введение keyframes правила CSS3 удивительным образом увеличило возможности CSS по созданию или анимированию объектов. Используя это правило, мы можем изменять набор стилей CSS много раз.

В этой статье я покажу, как анимировать векторное изображение жирафа, который будет прогуливаться в окружении облаков, изгороди и фонового изображения.

Имейте в виду, что это не вводное пособие по CSS3-анимации. Если вы не знаете, как работает CSS3 анимация, я рекомендую вам посетить эту страницу.

Ресурсы, которые понадобятся для выполнения заданий этой статьи:

PSD-файл с макетом или вы можете создать свой собственный;
Reset.css;
Время и терпение.

Скачать исходные файлы Демо-версия

Структура папок

Структура папок

Наша файловая структура будет состоять из четырех папок и одного HTML-файла:

index.html - будет служить нам в качестве основного файла. Вся разметка будет задействоваться с помощью этого файла.
Папка img - для изображений.
Папка CSS - для стилей (CSS).

Подготовка элементов

Загрузите PSD-файл и откройте его в Photoshop. Обратите внимание, что каждый элемент разделен в панели слоев:

Вы можете импортировать каждый отдельный элемент, как PNG-файл, перетаскивая каждый слой в новый файл документа Photoshop и удаляя фон. Тем не менее, для векторных изображений конечностей и хвоста жирафа (кроме самого тела) нам нужно добавить дополнительное пространство в верхней или нижней части от точки привязки каждого элемента.

Это будет зависеть от того, где будет располагаться точка привязки этой части тела. Точка привязки - это точка пересечения, в которой хвост или конечности соединяются с телом, и в которой будет осуществляться CSS-вращение.

Смотрите изображение, приведенное ниже:

Чтобы сделать это, перетащите одну из конечностей в новый файл документа Photoshop, удалите фон и используйте шкалу линейки, чтобы указать, где вы хотите установить точку привязки:

Теперь выберите инструмент «Прямоугольное выделение» и выделите всю область изображения, начиная с угла в точке привязки.

Для этого примера у меня получился размер прямоугольного фрагмента 19 на 119 пикселей (вы можете видеть это на информационной панели). Я должен умножить получившийся размер на два, чтобы точка привязки, там, где соединяются конечности и тело, оказалась посередине:

Теперь перейдите к пункту меню Изображение - Размер холста и выставьте высоту холста 238 пикселей, что составляет размер, полученный нами при выделении области, умноженный на два.

Точка привязки будет направлена вверх, так как вращение в точке привязки будет осуществляться от верхней части элемента, и нам нужно будет дополнительное свободное пространство сверху. Нажмите OK:

Теперь повторите все это для остальных частей тела. Только будьте осторожны, при добавлении к изображениям дополнительного свободного пространства.

Приступаем к работе

Во-первых, нам нужно добавить следующие коды в раздел Head. С их помощью мы подключаем библиотеки CSS:

<!DOCTYPE html>
         <html lang="en">
	  <head>
	          <title>Animating</title>
	           <link href="css/reset.css" media="screen" rel="stylesheet">
	           <link href="css/style.css" media="screen" rel="stylesheet">
	</head>

HTML

Для HTML-разметки добавьте все импортированные файлы PNG и заключите их в блок <div> с разметкой ID giraffe-animation:

<div id="giraffe-animation">
	        <img id="clouds" src="img/clouds2.png"/>
	        <img id="fence" src="img/fence.png"/>
	        <img id="back-left" src="img/back-left.png"/>
	        <img id="front-left" src="img/front-left.png"/>
	        <img id="tail" src="img/tail.png"/>
	        <img id="main-body" src="img/body.png"/>
	        <img id="back-right" src="img/back-right.png"/>
	        <img id="front-right" src="img/front-right.png"/>
	</div>

Теперь у вас уже должна получиться картинка, которая показана на рисунке ниже:

CSS

Для CSS добавьте стили в контейнер giraffe-animation, который будет включать фоновое изображение. Задайте ему высоту, ширину и относительное расположение. Кроме того, скройте все заполненные заливкой элементы, чтобы все слои содержались внутри контейнера.

Затем установите позицию для каждого элемента и задайте каждому из них абсолютное расположение:

#giraffe-animation {
	    width: 800px;
	    height: 600px;
	    background: url(../img/background.png)top left no-repeat;
	    border: 4px solid #373737;
	    margin: 20px auto 0;
	    position: relative;
	    overflow: hidden;
	}
	 
	#clouds {
	    position: absolute;
	    left: 0;
	    top: 55px;
	}
	 
	#fence {
	    position: absolute;
	    left: -10px;
	    top: 173px;
	}
	 
	#main-body {
	    position: absolute;
	    left: 293px;
	    top: 90px;
	}
	 
	#front-left {
	    position: absolute;
	    left: 308px;
	    top: 292px;
	}
	 
	#back-left {
	    position: absolute;
	    left: 332px;
	    top: 304px;
	}
	 
	#tail {
	    position: absolute;
	    left: 239px;
	    top: 305px;
	}
	 
	#front-right {
	    position: absolute;
	    left: 429px;
	    top: 296px;
	}
	 
	#back-right {
	    position: absolute;
	    left: 446px;
	    top: 277px;
	}

После добавления всех этих кодов, вы можете увидеть результат, как на приведенной ниже картинке:

Теперь давайте добавим для конечностей правило keyframes. Это позволит задать для конечностей свойства вращения, используя ключевые слова from и to. Скопируйте и вставьте приведенный ниже код:

@-webkit-keyframes limb1{
	    from {-webkit-transform: rotate(-5deg);}
	    to {-webkit-tranform: rotate(40deg);}
	}
	 
	@-moz-keyframes limb1{
	    from {-moz-transform: rotate(-5deg);}
	    to {-moz-tranform: rotate(40deg);}
	}
	 
	@keyframes limb1{
	    from { transform: rotate(-5deg);}
	    to {tranform: rotate(40deg);}
	}
	 
	@-webkit-keyframes limb2{
	    from {-webkit-transform: rotate(5deg);}
	    to {-webkit-tranform: rotate(-10deg);}
	}
	 
	@-moz-keyframes limb2{
	    from {-moz-transform: rotate(5deg);}
	    to {-moz-tranform: rotate(-10deg);}
	}
	 
	@keyframes limb2{
	    from {transform: rotate(5deg);}
	    to {tranform: rotate(-10deg);}
	}
	 
	@-webkit-keyframes limb3{
	    from {-webkit-transform: rotate(-5deg);}
	    to {-webkit-tranform: rotate(10deg);}
	}
	 
	@-moz-keyframes limb3{
	    from {-moz-transform: rotate(-5deg);}
	    to {-moz-tranform: rotate(10deg);}
	}
	 
	@keyframes limb3{
	    from {transform: rotate(-5deg);}
	    to {tranform: rotate(10deg);}
	}
	 
	@-webkit-keyframes limb4{
	    from {-webkit-transform: rotate(5deg);}
	    to {-webkit-tranform: rotate(-40deg);}
	}
	 
	@-moz-keyframes limb4{
	    from {-moz-transform: rotate(5deg);}
	    to {-moz-tranform: rotate(-40deg);}
	}
	 
	@keyframes limb4{
	    from {transform: rotate(5deg);}
	    to {tranform: rotate(-40deg);}
	}

Обратите внимание, что вендорные префиксы используются, чтобы указать конкретные браузеры. Чтобы включить эту keyframe анимацию, нужно добавить свойства анимации для каждой конечности.

Они должны включать название анимации, продолжительность анимации, функцию синхронизации анимации, задержку анимации и количество повторений анимации.

Скопируйте приведенный ниже код, и добавить его в CSS код каждой конечности:

#front-left {
	    -webkit-animation: limb1 .5s linear 0 infinite alternate;
	    -moz-animation: limb1 .5s linear 0 infinite alternate;
	    -ms-animation: limb1 .5s linear 0 infinite alternate;
	    -o-animation: limb1 .5s linear 0 infinite alternate;
	    animation: limb1 .5s linear 0 infinite alternate;
	}
	 
	#back-left {
	    -webkit-animation: limb4 .5s linear 0 infinite alternate;
	    -moz-animation: limb4 .5s linear 0 infinite alternate;
	    -ms-animation: limb4 .5s linear 0 infinite alternate;
	    -o-animation: limb4 .5s linear 0 infinite alternate;
	    animation: limb4 .5s linear 0 infinite alternate;
	}
	 
	#tail {
	    -webkit-animation: tail .3s linear 0 infinite alternate;
	    -moz-animation: tail .3s linear 0 infinite alternate;
	    -ms-animation: tail .3s linear 0 infinite alternate;
	    -o-animation: tail .3s linear 0 infinite alternate;
	    animation: tail .3s linear 0 infinite alternate;
	}
	 
	#front-right {
	    -webkit-animation: limb3 .5s linear 0 infinite alternate;
	    -moz-animation: limb3 .5s linear 0 infinite alternate;
	    -ms-animation: limb3 .5s linear 0 infinite alternate;
	    -o-animation: limb3 .5s linear 0 infinite alternate;
	    animation: limb3 .5s linear 0 infinite alternate;
	}
	 
	#back-right {
	    -webkit-animation: limb2 .5s linear 0 infinite alternate;
	    -moz-animation: limb2 .5s linear 0 infinite alternate;
	    -ms-animation: limb2 .5s linear 0 infinite alternate;
	    -o-animation: limb2 .5s linear 0 infinite alternate;
	    animation: limb2 .5s linear 0 infinite alternate;
	}

Затем добавьте keyframes для тела. Для этого используйте свойство translateY, чтобы определить преобразование элемента через указание расстояния вдоль вертикальной оси Y. Это создаст плавное перемещение векторного изображения тела жирафа:

@-webkit-keyframes main-body {
	    from {-webkit-transform: translateY(0px);}
	    to {-webkit-transform: translateY(3px);}
	}
	 
	@-moz-keyframes main-body {
	    from {-moz-transform: translateY(0px);}
	    to {-moz-transform: translateY(3px);}
	}
	 
	@keyframes main-body {
	    from {transform: translateY(0px);}
	    to {transform: translateY(3px);}
	}

Далее, добавьте следующий код к элементу тела, чтобы подключить анимацию. Здесь также
добавьте необходимые свойства анимации для элемента тела:

#main-body {
	    -webkit-animation: main-body .3s linear 0 infinite alternate;
	    -moz-animation: main-body .3s linear 0 infinite alternate;
	    -ms-animation: main-body .3s linear 0 infinite alternate;
	    -o-animation: main-body .3s linear 0 infinite alternate;
	    animation: main-body .3s linear 0 infinite alternate;
	}

Теперь, когда у нас есть тело, добавьте анимацию для хвоста. Скопируйте следующий код и вставьте его в свой CSS-файл:

@-webkit-keyframes tail{
	    from{-webkit-transform: translateY(0px) rotate(-3deg);}
	    to{-webkit-transform: translateY(3px) rotate(3deg);}
	}
	 
	@-moz-keyframes tail{
	    from{-moz-transform: translateY(0px) rotate(-3deg);}
	    to{-moz-transform: translateY(3px) rotate(3deg);}
	}
	 
	@keyframes tail{
	    from{transform: translateY(0px) rotate(-3deg);}
	    to{transform: translateY(3px) rotate(3deg);}
	}

Затем добавьте следующий код к CSS-коду хвоста. Это снова добавляет свойства анимации, чтобы запустить правила keyframe для хвоста. Остальные коды будут такими же, как предыдущий код, который мы добавили, чтобы разместить на экране элемент хвоста:

#tail {
	    -webkit-animation: tail .3s linear 0 infinite alternate;
	    -moz-animation: tail .3s linear 0 infinite alternate;
	    -ms-animation: tail .3s linear 0 infinite alternate;
	    -o-animation: tail .3s linear 0 infinite alternate;
	    animation: tail .3s linear 0 infinite alternate;
	}

Теперь, когда у нас есть рабочая анимация ног, тела и хвоста, сосредоточимся на анимации забора. Скопируйте приведенное ниже правило keyframes и добавьте его в свой CSS-файл:

@-webkit-keyframes fence{
	    from{left: -10px;}
	    to{ left: -288px;}
	}
	 
	@-moz-keyframes fence{
	    from{left: -10px;}
	    to{ left: -288px;}
	}
	 
	@keyframes fence{
	    from{left: -10px;}
	    to{left: -288px;}
	}

Скопируйте и добавьте приведенный ниже код CSS к CSS-коду забора:

#fence {
	    -webkit-animation: fence 3s linear 0 infinite;
	    -moz-animation: fence 3s linear 0 infinite;
	    -ms-animation: fence 3s linear 0 infinite;
	    -o-animation: fence 3s linear 0 infinite;
	    animation: fence 3s linear 0 infinite;
	}

И наконец, добавьте правила keyframes для элемента облаков:

@-webkit-keyframes clouds{
	    from{left: -15px;}
	    to{left: -190px;}
	}
	 
	@-moz-keyframes clouds{
	    from{left: -15px;}
	    to{left: -190px;}
	}
	 
	@keyframes clouds{
	    from{left: -15px;}
	    to{left: -190px;}
	}

Добавление приведенного ниже кода CSS к предыдущему CSS-коду облаков подключает правило keyframes для элементов облаков:

#clouds {
	    position: absolute;
	    left: 0;
	    top: 55px;
	    -webkit-animation: clouds 3s linear 0 infinite;
	    -moz-animation: clouds 3s linear 0 infinite;
	    -ms-animation: clouds 3s linear 0 infinite;
	    -o-animation: clouds 3s linear 0 infinite;
	    animation: clouds 3s linear 0 infinite;
	}

Заключение

Поздравляю! Вы только что создали классное анимированное изображение!

Изучение CSS3-анимации может дать вам многое. С ее помощью вы можете добавить на свой веб-сайт удивительные эффекты, которые прежде были доступны только с помощью JavaScript. Надеюсь, вам понравилась эта статья.