Как сделать анимацию картинки в css

19 января 2017 г. CSS-анимации: Transitions и Animations. Motion Path Module CSS

До появления CSS3 при слове «анимация» верстальщиков бросало в холодный пот. А всё потому, что в те времена сделать качественную и красивую анимацию было не тривиальной задачей. CSS этого делать не умел, поэтому все анимации делались на JavaScript. Нужно было перелопатить кучу форумов, найти таких же товарищей по несчастью, потратить уйму времени на разработку, а в итоге услышать от дизайнера: «Ладно, сойдет и так». И когда наконец вышел CSS3, фейерверки не прекращались до утра, а шампанское лилось рекой. Это был знаменательный день для всех web-разработчиков (следующий такой день был, когда Microsoft объявила о прекращении поддержки Internet Explorer). С приходом CSS3 многие ранее сложные задачи превратились в простые и приятные для работы. Это же касается анимаций в CSS, о которых я расскажу в данной статье.

CSS transitions

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

При наведении курсора на квадрат плавно изменяется цвет фона.

Теперь подробнее рассмотрим, как управлять переходами в CSS. У нас на вооружении есть всего 5 свойств, которые позволяют контролировать transition-анимацию:

• transition-property;
• transition-duration;
• transition-timing-function;
• transition-delay;
• transition;

transition-property — указывает список свойств, которые будут анимироваться; свойства, которые здесь не указаны, будут изменяться обычным образом. Можно анимировать все свойства для конкретного элемента, указав значение all. Если вы не указали ни одного свойства, то по умолчанию используется значение all.

transition-property: width;

transition-duration — задаёт значение продолжительности анимации, время можно указывать в секундах или миллисекундах.

transition-duration: 1s;

transition-timing-function — временная функция, указывает точки ускорения и замедления за определенный период времени для контроля изменения скорости анимации. Проще говоря, с помощью этого свойства можно указать поведение для анимации. Например, мы можем ускорить анимацию в начале и замедлить в конце, либо наоборот. Для того, чтобы задать процесс анимации используются кривые Безье. Вообще, transition-timing-function позволяет сделать очень много разных поведений для анимаций, это целая тема для статьи, поэтому здесь мы не будем углубляться.

transition-timing-function: cubic-bezier(0, 0, 1, 1);

transition-delay — задаёт задержку времени до начала анимации, можно указывать в секундах или миллисекундах.

transition-delay: 500ms;

transition — это общее свойство, которое позволяет перечислить первые четыре свойства в порядке: property, duration, timing-function, delay.

transition: background-color 1s cubic-bezier(0, 0, 1, 1) 500ms;

У нас получилась вот такая простая анимация: при наведении мышкой на квадрат изменяется ширина; продолжительность анимации одна секунда; анимация воспроизводится по линейной функции; задержка перед началом анимации 500 миллисекунд.

С помощью CSS transitions можно анимировать почти все свойства и создавать много интересных, красивых, функциональных и даже сложных анимаций, которые будут дополнять и улучшать ваш проект. Например, я сделал вот такой Material-FAB на чистом CSS, используя transitions:

CSS animations

CSS animations позволяют делать более сложные анимации, нежели CSS transitions. Весь секрет в @keyframes. Правило @keyframes позволяет создавать анимацию с помощью набора ключевых кадров, то есть описывает состояние объекта в определенный момент времени. Давайте рассмотрим простой пример.

Наш круг ожил и он как будто пульсирует.

Есть 9 свойств, которые позволяют контролировать CSS animations:

• animation-name;
• animation-duration;
• animation-timing-function;
• animation-delay;
• animation-iteration-count;
• animation-direction;
• animation-play-state;
• animation-fill-mode;
• animation;

animation-name — здесь указвается имя анимации, которое связывает правило @keyframes с селектором.

animation-name: my-animation;

@keyframes my-animation < 0% < opacity: 0; >100% < opacity: 1; >>

animation-iteration-count — задаёт количество повторов анимации, значение по умолчанию 1. Значение infinite означает, что анимация будет проигрываться бесконечно.

animation-iteration-count: 2;

animation-direction — задаёт направление анимации.

animation-direction: reverse;

animation-play-state — данное свойство управляет остановкой и прогрыванием анимации. Есть два значения, running (анимация проигрывается, по умолчанию) и paused (останавливает анимацию).

animation-play-state: paused;

animation-fill-mode — устанавливает, какие CSS-свойства будут приминены к объекту до или после анимации. Может принимать такие значения:

• none — анимируемые CSS-свойства применятся к объекту только во время воспроизведения анимации, по окончании объект возвращается в исходное состояние;
• forwards — анимируемые CSS-свойства применятся к объекту по окончании воспроизведения анимации;
• backwards — анимируемые CSS-свойства применятся к объекту до начала воспроизведения анимации;
• both — анимируемые CSS-свойства применятся к объекту и до начала, и после окончания воспроизведения анимации;

animation-fill-mode: backwards;

Свойства animation-duration, animation-timing-function, animation-delay работают так же, как аналогичные свойства в CSS transitions, о которых я писал раньше, поэтому не буду повторяться.

С помощью animations CSS можно создавать довольно сложные анимации без использования JavaScript. Яркий пример — это лоадеры, то есть элементы, которые показывают, что на вашей страничке что-то загружается. Вот несколько примеров:

Motion Path Module

Motion Path Module CSS позволяет создавать движение объектов по контуру через специальное свойство motion-path. Раньше такую анимацию можно было сделать только с помощью SVG или сложных скриптов.

В этой спецификаии есть 3 свойства:

• motion-path;
• motion-offset;
• motion-rotation;

motion-path — это свойство позволяет указать точки(координаты) по которым будет двигаться объект. Синтаксис такой же как у SVG-атрибута path.

motion-path: path('M 235,323 Q 412,440 365,615 Q 400,300 670,240 L 870,340 L 975,535 Q 730,600 630,535 z');

motion-offset — это свойство приводит объект в движение от начальной точки до конечной. Оно принимает либо двойное значение длины, либо проценты. Чтобы объект начал двигаться, нужно определить анимацию, которая будет идти от 0 до 100%.

@keyframes airplane-fly < 0% < motion-offset: 0; >100% < motion-offset: 100%; >>

motion-rotation — это свойство позволяет указать, какой стороной вперед будет двигаться объект. Можно указать auto, reverse или свое значение в градусах (‘-45deg’, ’30deg’ и т.д).

motion-rotation: auto;

К сожалению, motion-path пока что поддержывается только в Chrome и Opera, но будем надеяться, что остальные браузеры в скором времени возьмут с них пример, ведь штука действительно полезная.

Для тех, кто ещё не понял, как это работает, или хочет лучше с этим разобраться, я сделал пример (ссылка на codeopen).

Вам также может понравиться
10 самых распространенных ошибок веб-дизайна
Бесплатные инструменты для дизайнера: создание карт
Примеры дизайна меню сайтов

• web-development ,
• web-design

CSS анимация картинки при наведении | tutorial css3

В одном из видео уроке по анимации картинки в CSS показывал как можно сделать эффект затемнения изображения псевдоэлементами :before и :after , путем изменением режима пересечения цветов.

See the Pen eePdjZ by Denis (@Dwstroy) on CodePen.

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

Все это реализуем на чистом CSS3, и в уроке задействуем:

• Псевдоэлементы :before и :after
• Расположим элементы при помощи position
• А для анимации воспользуемся transform и transition

HTML разметка блоков для картинки

Начинаем как всегда с идеи, нам понадобится блок с оберткой, которому присвоим класс .dws-wrapper и основное его предназначение, позиционирование всех элементов посередине экрана. В нем расположим блок с классом .boxImg , в котором будем складывать все элементы нашей анимации.

У нас будет три основных элемента:

1. картинка;
2. псевдоэлементы;
3. блок с текстом.

Псевдоэлементам присвоим класс .container , а блоку с текстом класс .text и расположим в нем заголовок и параграф с кнопкой.

Открываю свою среду разработки, я использую редактор PhpStorm. Создаю файл index.html , прописываю заголовок страницы «Эффект наложений картинок», затем в body открывает тег header где будем описывать html разметку.

div.dws-wrapper>div.boxImg>img+div.container>div.text>h1+p+a.bt

Прописываем сразу путь к изображению, оно будет находиться в папке img с названием nature.jpg . Чуть позже мы его вставим. Пропишем заголовок и основной текст «Ваш шедевр готов!», «Варианты разнообразных эффектов при наведении безграничны вы можете придумывать их сами, меняя параметры transform и позиционируя элементы как угодно.». Ссылке атрибут вставим решетка, название пропишем «Подробнее».

 
 
  
 
Ваш шедевр готов!
 
Варианты разнообразных эффектов при наведении безграничны вы можете придумывать их сами, меняя параметры transform и позиционируя элементы как угодно.
 Подробнее 
 
 
 
 
 

Создадим папку img , в нее перенесем картинку на задний фон и рисунок под анимацию.

Видим, что она сразу отобразилась в окне браузера и ее размера гораздо выше, чем окно просмотра. Этот момент нам нужно будет учесть, картинка может быть загружена разных размеров и не должна вылизать за пределы созданных рамок.

Сразу создаем и подключаем style.css , и тут же подключим шрифты. Как это делать я объяснял в одном из уроков и поэтому тут останавливаться не будем.

C разметкой мы закончили и можно приступать к описанию стилей.

Опишем стили CSS3 основной структуры

Описание стилей я разделяю на несколько этапов:

1. мы описываем основную структуру элементов, выравниваем и позиционируем блоки;
2. затем делаем анимацию и дополнительные эффекты при наведении;
3. третьим этапом, если есть необходимость, придаем элементам дизайнерское оформление.

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

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

Тексту зададим шрифт Cuprum, затем сделаем об водку для изображения в 5 пик. при помощи border . Как видите, изображение вылезло за рамки границы установленного блока, и что бы скрыть все лишнее воспользуемся overflow: hidden; .

.boxImg

Далее самой картинке задам высоту в 300 пик.

.boxImg img

Благодаря именно высоте мы сможем оптимально подгонять другие изображения под текущий размер блока 500х300 пик.

После того как картинка приняла оптимальные размеры, отцентруем элементы по середине экрана.

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

body < background-image: url("img/ep_naturalwhite.png"); >.dws-wrapper

Нам нужно создать два псевдоэлемента по бокам картинки, для этого блоку .container зададим position: absolute; с начальными точками координат в ноль. Так же пропишем ширину и высоту в 100%

.container

Затем сгруппируем псевдоэлементы :before и :after и пропишем им повторяющие стили которые будут у их обоев.

.container:before, .container:after

Далее описываем каждый псевдоэелемент по отдельности, отбираем .container:before , при помощи translateX сдвинем блок на 125%, и при помощи rotate повернем его на 45 градусов.

.container:before

Тоже самое сделаем с псевдоэлементом :after , только по оси Х сдвинем его в правую сторону.

.container:after

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

Поработаем немного с текстом. Присвоим классу .text position: absolute; и сверху укажем отступ в 20%. Назначим тексту белый цвет и помещаем его по центру блока.

.text

Заголовку задаем отступ снизу в 20 пик, размер укажем в 30 пик. и нам нужно сделать так, что бы он появлялся из далека, для этого применим трансформацию с функцией scale (масштабирование).

Видим, что заголовок исчез, и если будем менять параметр масштабирования, мы не увидим плавный его переход. Для этого нам нужно прописать transition: .5s; . Теперь изменяя параметр, масштабирование мы видим, как заголовок появляется и при scale(0) , он исчезает.

.text h1

Затем работаем с абзацем, задаем размер в 18 пик., делаем отступы по бакам в 100 пик, текст растягиваем по ширине блока. Тут нам нужно сделать, что бы он появлялся с переднего плана. Для этого прописываем масштабирование только в противоположно варианте transform: scale(2); . Чтобы сделать плавный переход пропишем transition: .5s; , а так как текст, при данном масштабировании не выходит за рамки видимой области нам нужно его скрыть, и пропишем opacity: 0; .

.text p

Далее отбираем ссылку с классом .bt , и от позиционируем ее чуть ниже, делаем белым цветом, убираем подчеркивание, и заглавными опишем буквами. Задаем белую об водку в 2 пик, и добавим отступы, у рамки закруглим ее углы.

Затем кнопке сделаем блик, для этого присвоим ей псевдоэлемент, позиционируем его за пределами блока с размерами в 50 пик. и в качестве цвета задаем ингредиент с белым оттенком, при помощи функции skewX немного его исказим.

a.bt:before

В дальнейшем сделаем перемещение этого элемента, а на данный момент скрываем кнопку при помощи opacity: 0; Для плавной ее появлении делаем transition: .2s с функцией ease-in-out; которая начинает и заканчивает медленно анимацию.

opacity: 0; transition: .2s ease-in-out; >

Анимируем элементы при помощи :hover

Придадим анимацию кнопки при наведении не нее. Нам нужно придать движение блику, для этого отбираем этот псевдоэлемент, и задаем перемещение при наведении в правую сторону на 150 пик., а для того что бы это плавно происходило, пропишем transition в .5s и с дополнительной функцией ease-in-out; . Что бы скрыть блик за пределами блока привоем ссылке overflow: hidden; .

a.bt:hover:before < left: 150px; transition: .5s ease-in-out; >a.bt overflow: hidden; >

Блик получился и не хватает эффекта при нажатии, для этого зададим бордюру более темнее цвет при клике.

a.bt:active

Затем скрываем кнопку и опишем появление всех элементов при наведении на блок.

Анимируем картинку в CSS

Начнем мы с изображения, картинку немного развернуть, увеличим в размере и сделаем размытой. Для это отбираем изображение при наведении, прописывает transform , с помощью rotate укажем поворот на 30 градусов и при помощи дополнительной функции увеличим его в двое. Далее задаем размытие при помощи фильтра filter: blur(2px); в 2 пик.

.boxImg:hover img

Для плавности его появления, пропишем картинке transition: .5s; .

.boxImg img transition: .5s; >

Анимируем псевдоэлементы ::before и ::after

Следующим этапом делаем перемещение псевдоэлементов, для этого пропишем их в первоначальном виде в прозрачном состоянии.

.container:before, .container:after opacity: .1; >

Для :before задаем при помощи трансформации перемещение на 92% в право, с сохранением его в повернутом виде с увеличением масштаба блока в двое. Для плавного перемещения прописываем transition: .5s; , и делаем блок более видимым.

.boxImg:hover .container:before

Тоже самое проделываем с псевдоэлементом :after только перемещение блока описываем с право налево.

.boxImg:hover .container:after

Затем скроем все лишнее, что выходит за пределы основного блока .boxImg . Для этого пропишем position: relative; блоку с картинкой, и тут же блоку зададим специфическую об водку при помощи outset .

.boxImg position: relative; >

Для того что бы псевдоэлементы плавно возвращались добавляем им transition в 1 сек.

.container:before, .container:after transition: 1s; >

Далее остается нам отобразить текст при наведении, при помощи той же самой трансформации отображаем заголовок, и абзац.

.boxImg:hover .text h1 < transform: scale(1); >.boxImg:hover .text p

Задаем изменение бордюра при наведении.

.boxImg:hover

И данный стиль применим в покое к блоку с картинкой.

.boxImg < border: 5pxoutset #b7bab7; >

Далее при помощи z-index текст помещаем на передний план все элементов.

.text z-index: 10; >

Остается отобразить кнопку при наведении на блок. Отбираем блок и задаем opacity в 1, делаем плавное появление.

.boxImg:hover a.bt

На этом код у нас готов и получился красивый эффект анимации при наведении.

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

Компонент Анимация Animation

Потрясающая коллекция плавных CSS-анимаций для использования на веб-странице. Создание анимации. Эффект Кена Бернса. Применение. Модификаторы. Разметка. Готовые примеры.

Создание анимации

Добавьте один из классов .uk-animation-* к любому элементу. Анимация сработает при добавлении класса, обычно это сразу при загрузке страницы. Чтобы показать анимацию в определенное время, например, когда элемент входит в область просмотра страницы, вы должны добавить класс с использованием JavaScript — например, применить компонент Scrollspy. Компонент Scrollspy используется во многих компонентах UIkit 3, которые используют анимацию.

Все анимации UIkit 3 реализованы с помощью CSS, поэтому для их использования не требуется JavaScript.

Класс	Описание
.uk-animation-fade	Элемент плавно, постепенно появляется; исчезает см. реверс.
.uk-animation-scale-up .uk-animation-scale-down	Появляющийся элемент увеличивается в масштабе, масштабируется изнутри или снаружи.
.uk-animation-slide-top .uk-animation-slide-bottom .uk-animation-slide-left .uk-animation-slide-right	Новоявленный элемент скользит сверху, снизу, слева или справа ориентируясь на свою собственную высоту или ширину.
.uk-animation-slide-top-small .uk-animation-slide-bottom-small .uk-animation-slide-left-small .uk-animation-slide-right-small	Желанный элемент подкатывает сверху, снизу, слева или справа с наименьшей дистанции.
.uk-animation-slide-top-medium .uk-animation-slide-bottom-medium .uk-animation-slide-left-medium .uk-animation-slide-right-medium	Элемент исчезает и скользит сверху, снизу, слева или справа со среднего расстояния.
.uk-animation-kenburns	Существующий элемент очень медленно масштабируется.
.uk-animation-shake	Элемент качает, колбасит , трясет.
.uk-animation-stroke	Анимации штрихов SVG. Рисует штрихи (strokes) элемента SVG.

Чтобы запустить анимацию при наведении или фокусе, добавьте в родительский элемент класс .uk-animation-toggle . Также добавьте tabindex=»0″ , чтобы сделать анимацию фокусируемой с помощью клавиатуры и сенсорных устройств.

SVG Strokes

Анимация штрихов SVG

Компонент Анимация можно использовать для анимации штрихов SVG. Эффект выглядит так, будто штрихи SVG рисуются прямо на ваших глазах. Изображение SVG должно быть размещено в разметке как встроенный SVG. Это можно сделать вручную или с помощью компонента Изображения SVG.

В следующем примере показано, как добавить встроенный SVG вручную. Поскольку вы должны знать точную длину обводки, UIkit требует, чтобы вы установили длину в пользовательском свойстве —uk-animation-stroke . В этом примере длина обводки составляет 46 .

Умышленно меньше:

Гораздо проще использовать компонент Изображения SVG, добавив uk-svg=»stroke-animation: true» к элементу изображения. Он самостоятельно рассчитает длину обводки и автоматически добавит пользовательское свойство —uk-animation-stroke .

Учимся создавать анимированные эффекты с помощью CSS3

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

• Картинки;
• Шрифт Viga (Google-шрифт).

Скачать исходные файлы

Я хочу показать, как превратить изображение в форме квадрата ( с закругленными углами ) в окружность. При наведении на изображение его форма будет плавно меняться на окружность в течение 1 секунды. После этого мы установим для нее 50% радиуса, чтобы получить идеальный круг.

Разметка

HTML-код будет состоять из изображения, обернутого в с заданным классом эффекта. Мы также используем класс morph ( для эффекта превращения ):

CSS-код

В нем мы зададим размер для изображения 200 на 200px , и границу белого цвета толщиной 10px . Также добавим радиус со значением 15px , чтобы слегка закруглить углы. Скроем все, что выходит за пределы видимого изображения. Для события mouse-over мы установим курсор pointer :

.img < width: 200px; height: 200px; border: 10px solid #fff; -webkit-border-radius: 15px; border-radius: 15px; overflow: hidden; >.img:hover

Для анимации на сайте HTML эффекта превращения мы воспользуемся CSS3-свойством transition . Сначала укажем специфические браузерные свойства ( -webkit , -moz , -ms , -o ), и установим значение all 1s ease . Это позволит нам растянуть переход на 1 секунду при наведении на изображение курсора мыши.

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

transition: [transition-property] [transition-duration] [transition-timing-function] ;

• [transition-property] применяется для указания конкретных стилей или свойств, которые нужно использовать ( background , width и т. д ). Мы используем all , чтобы применить эффект ко всем свойствам;
• [transition-duration] отвечает за скорость анимации или перехода. В нашем примере используется значение 1s . Это значит, что анимация будет длиться 1 секунду. Учтите, что если скорость не будет определена, то у перехода не будет никакого эффекта;
• [transition-timing-function] определяет, как будет вычисляться скорость во время перехода. Стандартным значением [transition-timing-function] является ease . Это значит, что эффект будет начинаться с медленного темпа, затем разгонится, а в конце снова слегка замедлится.

Далее мы добавляем стили для состояния mouse-over . Используем белую границу толщиной 10px , а также закругленные углы border-radius: 50% . За счет чего у нас получится идеальный круг при наведении курсора мыши. Мы также добавим тень блока, чтобы получить эффект свечения:

.morph < -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -ms-transition: all 1s ease; -o-transition: all 1s ease; transition: all 1s ease; >.morph:hover

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

Разметка

HTML-разметка будет той же, что и при эффекте превращения, но на этот раз вместе с классом img мы используем класс zoom ( для эффекта увеличения ):

CSS-код

Мы указываем базовую ширину и высоту: 200 на 200 px . Затем снова воспользуемся эффектом перехода, но теперь установим время 2 секунды, что позволит придать выразительности при возникновении события mouse-over . Также мы добавим по 100 px к ширине и высоте, что позволит создать иллюзию увеличения.

Если вы вернетесь к CSS-коду для нашего изображения, то увидите, что мы скрываем все, что выходит за его пределы. Это позволит удержать изображение внутри границ. Кроме этого мы добавим тень блока для эффекта свечения:

.zoom img < width: 200px; height: 200px; -webkit-transition: all 2s ease; -moz-transition: all 2s ease; -ms-transition: all 2s ease; -o-transition: all 2s ease; transition: all 2s ease; >.zoom img:hover

Позиция

Перед тем, как вставить анимацию на сайт, нужно понять ее сущность. В рамках этого эффекта мы слегка наклоним изображение. Эффект может выглядеть иначе в зависимости от установленной продолжительности анимации и градуса наклона. Обратите внимание, что длительность меняется путем изменения значения 0.3s .

Также с помощью transform можно указать, насколько сильно будет наклонено изображение. Свойство Transform позволяет изменять форму элемента, его размер и расположение. Можно изменять эффект за счет смены значения rotate ( 10deg ) ( 10 градусов ).

Разметка

По разметке все то же самое, за исключением того, что вместе с классом img мы укажем еще и класс tilt :

CSS-код

Мы снова добавляем эффекты переходов ( transition ), но для начала указываем браузерные свойства. На этот раз нам нужно, чтобы все происходило медленно, и поэтому мы устанавливаем значение 0.3 миллисекунды.

Далее мы переходим к mouse-over , для которого используем свойство transform . Это свойство позволяет вращать, масштабировать, перемещать и искажать элементы.

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

.tilt < -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; -ms-transition: all 0.3s ease; transition: all 0.3s ease; >.tilt:hover

Цвет

В качестве примера мы попробуем сбросить все цвета и создать нечто вроде монохромного эффекта при наведении. Это можно реализовать при помощи webkit filter . Это свойство, которое применяется к элементу по мере того, как он прорисовывается в документе. Как в эффектах Photoshop , которые позволяют изменять яркость цветов.

Затем мы устанавливаем значение перехода на all 1s ease , чтобы получить плавный эффект при наведении курсора мыши.

Разметка

Повторяем предыдущий HTML-код , но на этот раз применяем класс color вместе с классом img :

CSS-код

Снова повторяем код перехода. Устанавливаем его на 1 секунду, а эффект тайминга на ease .

Что касается mouse-over , то для него мы воспользуемся свойством webkit-filter , а затем понизим цветность при помощи свойства grayscale . После этого добавим тень блока, чтобы получить уже привычный нам эффект анимации на сайте HTML :

.color < -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; -ms-transition: all 1s ease; transition: all 1s ease; >.color:hover

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

Размытие
-webkit-filter: blur(3px);
Сепия
-webkit-filter: sepia(100%);
Сепия
-webkit-filter: sepia(5%);
Инверсия
-webkit-filter: invert(0.2);
Цветность
-webkit-filter: saturate(50%);

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

Оживляем сайт при помощи Animate.css

Представляем вашему вниманию Animate.css – бесплатную CSS-библиотеку , созданную Дэном Эденом . Она состоит из 50 кроссбраузерных CSS-анимаций . Мы попробуем создать анимации при помощи Animate.css .

• Reset.css ;
• Animate.css ;
• Raleway ( Google-шрифт );
• Open Sans ( Google-шрифт );
• Flat Icons ( можно выбрать любую иконку );
• Фоновые картинки.

Скачать исходные файлы

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

Проект состоит из HTML-файлов , папки с картинками и папки для CSS-файлов :

• index.html – наш основной файл;
• images – папка для картинок;
• css – папка для файлов стилей.

Над чем работаем:

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

Перед тем, как вставить анимацию на сайт HTML и начать работу над разметкой, в шапку страницы добавим HTML5 doctype и несколько ссылок. Здесь будут представлены ссылки на CSS-файлы и библиотеки Google-шрифтов :

<html> <head> <meta charset="utf-8"> <title>Bring Your Website to Life Using Animate.css</title> <meta content="width=device-width,initial-scale=1" name="viewport"> <!-- stylesheet --> <link href="css/reset.css" rel="stylesheet"> <link href="css/style.css" rel="stylesheet"> <link href="css/animate.css" rel="stylesheet"><!-- font faces --> <link href='http://fonts.googleapis.com/css?family=Raleway:800,300' rel= 'stylesheet' type='text/css'> <link href= 'http://fonts.googleapis.com/css?family=Open+Sans:400italic,600italic,700italic,800italic,400,600,300,700,800' rel='stylesheet' type='text/css'> </head>

HTML-код

В HTML мы обернем все содержимое в контейнер с ID wrapper :

<body> <div Cover

В разделе Cover мы обернем все внутрь контейнера с ID cover, за которым последует класс container , что поможет нам центрировать все элементы. Далее мы создадим две колонки и расположим их по левому и правому краю:

<section CSS animations</h3> <h2>Animate.CSS</h2>

Animate.css – бесплатная CSS-библиотека , созданная Дэном Эденом . Она состоит из 50 кроссбраузерных CSS-анимаций , которые позволят не писать код вручную и анимировать элементы на странице:

</div> <div align="right" src= "images/browser.png"></div> <br </div> </section>

Раздел Features

В Features мы делаем то же самое, что и в предыдущем разделе анимации для сайта. Но на этот раз разделим каждую колонку при помощи классов column и one-third :

<section можно получить при помощи Animate.CSS</h2> <div one-third"> <img alt="" src="https://www.internet-technologies.ru/articles/images/icon_html5.png"> <h4>HTML5-совместимость</h4> Совместимая с HTML5 разметка с применением быстрых анимаций на CSS3 </div> <div one-third"> <img alt="" src="https://www.internet-technologies.ru/articles/images/icon_animation.png"> <h4>Невероятные анимации</h4> Библиотека укомплектована множеством анимаций, которые вы сможете использовать в собственных проектах. </div> <div one-third last"> <img alt="" src="https://www.internet-technologies.ru/articles/images/icon_w3c.png"> <h4>Соответствие требованиям W3C</h4> Библиотека была разработана с учетом стандартов W3C. </div> </div> </div> </section>

Раздел Effects

В этом разделе анимации на сайте HTML мы отделим колонки при помощи классов column и one-fourth , так как здесь нам потребуется четыре колонки:

<section эффекты от Animate.CSS</h2> <div one-fourth"> <img alt="" src="https://www.internet-technologies.ru/articles/images/box1.png"> <h4>BOUNCE IN DOWN</h4> </div> <div one-fourth"> <img alt="" src="https://www.internet-technologies.ru/articles/images/box2.png"> <h4>SWING</h4> </div> <div one-fourth"> <img alt="" src="https://www.internet-technologies.ru/articles/images/box3.png"> <h4>SHAKE</h4> </div> <div one-fourth last"> <img alt="" src="https://www.internet-technologies.ru/articles/images/box4.png"> <h4>FLASH</h4> </div> </div> </div> </section>

Раздел About

В этом разделе мы обернем все в класс container :

<section ANIMATE.CSS</h2>

Animate.css состоит из кроссбраузерных анимаций, созданных Дэном Эденом . Эффекты будут прекрасно смотреться в любых современных браузерах:

</div> </section>

Раздел Subscribe

В разделе подписки мы будем использовать ту же разметку анимации для сайта, что и в разделе About . Но здесь нам нужно вставить форму для ввода email-адреса , а также кнопку подтверждения:

<section на рассылку!</h2> Введите адрес вашей электронной почты, и мы обязательно пришлем вам что-нибудь интересное! <form action="" method="post" name= "newsletter-form"> <input name= "subscribe_email" placeholder="Your email" type="email" value= ""> <input name= "subscribe_submit" type="submit" value="Подписаться!"> </form> </div> </section>

Подвал

Сначала обернем в класс container и центрируем все на экране, используя файл style.css :

<footer 2014 <a href= "http://www.1stwebdesigner.com/" target= "_blank">1stwebdesigner</a>. Все права защищены </div> </footer> </body> </html>

Вот что у нас должно получиться:

CSS-код

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

body < font-family: 'Open Sans', sans-serif; font-weight: 300; >h2 < font-size: 48px; font-family: Raleway, sans-serif; font-weight: 800; margin-bottom: 20px; text-align: center; text-transform: uppercase; >h3 < font-family: 'Open Sans', sans-serif; text-transform: uppercase; font-size: 32px; font-weight: 300; margin-bottom: 30px; >h4 < font-family: 'Open Sans', sans-serif; font-size: 20px; font-weight: 800; text-transform: uppercase; margin-bottom: 10px; margin-top: 10px; >.fleft < float: left; >.fright < float: right; >.clear < clear: both; >.center < text-align: center; >#wrapper < width: 100%; overflow: hidden; >section

Далее следуют стили для контейнеров и колонок анимации для сайта:

.container < margin: 0 auto; width: 960px; padding: 50px 0 80px; >.column-container < margin: 40px 0 -40px; overflow: hidden; >.column < float: left; padding: 0 40px 40px 0; >.column-container.last < margin-bottom: 0; >.column.last < padding-right: 0; >.column.one-half < width: 460px; >.column.one-third < width: 290px; >.column.two-thirds < width: 630px; >.column.one-fourth < width: 210px; >.column.three-fourths < width: 710px; >.column img

Раздел Cover будет оформлен собственной фоновой картинкой. Перед тем, как вставить анимацию на сайт, стилизуем каждый элемент внутри раздела cover :

#cover < background: url(../images/background.png) center top no-repeat; font-size: 1.3em; >#cover .container < padding: 240px 0 200px; color: #fff; >#cover p < padding-right: 508px; text-shadow: 2px 2px 2px rgba(150,150,150,1); font-family: 'Open Sans'; text-align: left; >#cover h2 < font-size: 78px; line-height: 60px; margin: 20px 0; text-shadow: 2px 2px 2px rgba(150,150,150,1); text-align: left; >#cover h3 < margin: 0; text-shadow: 2px 2px 2px rgba(150,150,150,1); >#browser

Далее поработаем над стилизацией раздела Features . Задаем цвет фона #38bc94 , а свойству color присваиваем белый цвет. Также нужно центрировать текст в каждой колонке примера анимации для сайта:

#features < background: #38bc94; color: #fff; >#features h4,#features p

Для раздела Effects мы добавляем #e9e9e9 в качестве цвета фона и центрируем текст в каждой колонке:

#effects < background: #e9e9e9; text-align: center; color: #898989; >#effects img

После этого приступаем к оформлению раздела About :

#about < background: #3787bf; color: #fff; overflow: hidden; >#about h2,p

Перед тем, как добавить анимацию на сайт и перейти к разделу Subscribe , давайте добавим стили для форм. Здесь мы определяем текстовые поля и кнопки:

button,input,textarea < font-size: 16px; max-width: 100%; margin: 0; border-radius: 0; vertical-align: baseline; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; >textarea < overflow: auto; vertical-align: top; >input,textarea < background: #6e6e6e; background: rgba(169,169,169,0.3); border: 1px solid #f4f4f4; color: #fff; font-weight: 700; letter-spacing: 1px; padding: 12px; text-transform: uppercase; >input:focus,textarea:focus < outline: 0; >button:hover,button:focus,input[type=submit]:focus,input[type=submit]:hover < background: #419d81; color: #fff; outline: 0; >button,input[type=submit] < -webkit-appearance: button; cursor: pointer; >button,input[type=submit] < background: #38bc94; -webkit-transition: all .5s; -moz-transition: all .5s; transition: all .5s; >.form-field

Перед тем, как вставить анимацию на сайт HTML , добавим стили для раздела Subscribe . Мы добавим фоновую картинку и установим для каждой формы ширину и высоту:

#subscribe < background: url(../images/newsletter.png) no-repeat center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; color: #fff; padding: 40px 0; >#subscribe h2 < text-align: center; margin-top: 20px; >#subscribe-form .form-field < margin: 0 auto; >#subcribe_email < margin-top: 20px; >#subscribe-form .form-submit < height: 50px; width: 180px; display: block; margin: 20px auto 0; >#subcribe_email,#subscribe_submit

Добавляем стили для подвала страницы:

footer < background: #484848; color: #fff; >footer .container < padding: 20px 0 10px; overflow: hidden; >p#footer-copyright < text-align: center; >footer a

Медиа-запросы для адаптивного дизайна

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

@media all and (max-height: 1024px) and (max-width: 1024px) < section .container, footer .container < width: 900px; >#cover p < padding-right: 480px; >.column.one-third < width: 273px >.column.two-thirds < width: 587px >.column.one-half < width: 430px >.column.one-fourth < width: 195px >.column.three-fourths < width: 665px >> @media all and (max-width: 1023px) < section .container, footer .container < width: 640px; >.column.one-third, .column.two-thirds, .column.one-half, .column.one-fourth, .column.three-fourths < width: 100%; padding-right: 0; >#cover p < padding-right: 220px; >#features .column.one-third < width: 300px; >#features .column.one-third:nth-child(odd) < padding-right: 40px; >#effects .column.one-fourth < width: 130px; padding-right: 40px; >#effects .column.one-fourth.last < padding-right: 0; >> @media all and (max-width: 980px) < .fleft< float: none; >.fright < float; none; >#browser < display: none; >#cover h3, #cover h2, #cover p < text-align: center; padding: 0; margin: 20px auto; >> @media all and (max-width: 640px) < h2 < font-size: 2.8em >h3 < margin-bottom: 15px; >.column < padding-bottom: 20px; >.column-container < margin-bottom: 0; >.column-container < margin-top: 0; >section .container < width: 400px; padding: 50px 0; margin: 0 auto; >#wrapper < position: relative; >#wrapper.hidden < left: -240px; >footer .container < width: 400px; margin: 0 auto; >#cover < background-position: left bottom; >#cover .container < width: 400px; padding: 80px 0 40px; text-align: left; >#cover h2, #cover h3, #cover p < text-align: center; padding-right: 0; >#cover h2 < font-size: 54px; line-height: 44px; >#cover h3 < font-size: 23px; >#cover p < font-size: 16px; >.column.one-third, .column.two-thirds, .column.one-half, .column.one-fourth, .column.three-fourths < width: 100%; padding-right: 0; >#features .column.one-third < width: 100%; >#effects .column.one-fourth < width: 180px; padding-right: 40px; >#effects .column.one-fourth:nth-child(even) < padding-right: 0; >#about-container < margin: 30px 0 20px; >> @media all and (max-width: 480px) < section .container, footer .container, #cover .container < width: 260px; >h2 < text-align: center; >#cover .container < padding: 150px 0 100px; >#effects .column.one-fourth < width: 125px; padding-right: 10px; >#about-container < text-align: center; >footer .container < text-align: center; >p#footer-copyright < float: none; margin: 0; >> @media all and (max-width: 480px) < #cover h2 < font-size: 39px; >#browser < margin: 0 auto; >> @media all and (max-width: 320px) < h2 < font-size: 20px; >#about h2 < font-size: 20px; >#subscribe h2 < font-size: 20px; >>

Анимируем элементы при помощи Animate.CSS

Приступим к анимации на сайте. В файле animate.css присутствует класс “ animated ”. Это значит, что его нужно указать в разметке. Посмотрите на этот пример:

<h1 bounceInRight"> </h1>

Для этого руководства я использовал следующие классы анимации. Ознакомиться с полным перечнем классов можно на сайте Animate.css :

• bounceInLeft ;
• rotateIn ;
• bounceInRight ;
• lightSpeedIn ;
• flipInY ;
• bounceInDown ;
• swing ;
• shake ;
• flash ;
• bounce ;
• tada ;
• wobble .

Задержка анимации

Рассмотрим, как добавить анимацию для сайта HTML с задержкой в раздел Cover . Сначала к тегу H3 , расположенному под div с классом fleft , я добавляю анимационный класс bounceInLeft . Соответствующий код приведен ниже:

<h3 bounceInLeft">Just-add-water CSS animations</h3>

Далее я добавляю анимационный класс rotateIn к тегу H2 , а также класс bounceInRight к тегу абзаца:

<h2 rotateIn">Animate.CSS</h2>

Animate.css – бесплатная CSS-библиотека , созданная Дэном Эденом . Она состоит из 50 кроссбраузерных CSS-анимаций , которые позволят не писать код вручную и анимировать элементы на странице.

Добавим анимационный класс lightSpeedIn к изображению под div-элементом с классом fright :

<img align="right" lightSpeedIn" src="https://www.internet-technologies.ru/articles/images/browser.png"></div>

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

-webkit-animation-delay: 1s; -moz-animation-delay: 1s; -ms-animation-delay: 1s; -o-animation-delay: 1s; animation-delay: 1s;

В качестве примера для нашего анимационного класса bounceInLeft предлагаю следующий код:

.bounceInLeft

В моем примере элементы отображаются неодновременно. Для этого я добавил еще по одной секунде задержки. Ниже представлен полный код:

.bounceInLeft < -webkit-animation-name: bounceInLeft; animation-name: bounceInLeft; -webkit-animation-delay: 1s; -moz-animation-delay: 1s; -ms-animation-delay: 1s; -o-animation-delay: 1s; animation-delay: 1s; >.bounceInRight < -webkit-animation-name: bounceInRight; animation-name: bounceInRight; -webkit-animation-delay: 3s; -moz-animation-delay: 3s; -ms-animation-delay: 3s; -o-animation-delay: 3s; animation-delay: 3s; >.lightSpeedIn

Анимация при наведении

Рассмотрим, как вставить анимацию на сайт к элементам при наведении на них курсора мыши. Сначала следует добавить анимационные классы к элементам, которые нужно “ оживить ”:

<div one-third animated flipInY"> <img alt="" src="https://www.internet-technologies.ru/articles/images/icon_html5.png"> <h4>Совместимость с HTML5</h4> Совместимая с HTML5 разметка с применением невероятно быстрых анимаций на CSS3 </div>

Обратите внимание, что я добавил анимационный класс flipInY к одному из трех div-элементов . Этот эффект можно использовать для любого div .

Чтобы запустить анимацию при наведении курсора, нужно добавить к анимационному классу псевдоэлемент. В качестве примера давайте применим его к классу FlipInY :

.flipInY:hover < -webkit-backface-visibility: visible !important; -ms-backface-visibility: visible !important; backface-visibility: visible !important; -webkit-animation-name: flipInY; animation-name: flipInY; -webkit-animation-duration: 2s; -moz-animation-duration: 2s; -ms-animation-duration: 2s; -o-animation-duration: 2s; animation-duration: 2s; -moz-animation-fill-mode: both; -ms-animation-fill-mode: both; -o-animation-fill-mode: both; animation-fill-mode: both; cursor: pointer; cursor: pointer; >.flipInY:hover

В этом примере анимации для сайта я также использовал свойство animation-duration , которое позволяет контролировать продолжительность анимации. Учтите, что в примере также используется animation-fill-mode . Это свойство определяет, какие стили будут применяться к элементу в то время, пока не воспроизводится анимация.

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

В завершение

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