Как сделать движущуюся картинку в html

draw – метод, с помощью которого отрисовывается каждый этап состояния рисунка.

draw(progress); — функция, получающая состояние движения, и рисующая его. Так, скажем, значению progress = 0 соответствует его начальная точка, а progress = 1 , соответственно, конечная.
Именно эта функция осуществляет движение вверх/вниз 4-ого рисунка (мяча).

time или timer или timing – используются в разных выражениях скриптов, т.е. там, где что-либо связано с временем движения рисунков.

timePassed — метод для вычисления и установки счётчика времени движения.

setTimeout — метод, запускающий функцию, но лишь однократно (здесь, то есть в этих скриптах, такой метод не используется) .

setInterval — метод, имеющий такое же назначение и такой же синтаксис, как и выше упомянутый setTimeout , только он запускает выполнение функции НЕ один раз, а регулярно повторяет её через прописанный в коде интервал времени.

clearInterval(timer); – метод, позволяющий остановить выполнение скриптов движения.

timePassed / 5 + ‘px’; — выражение, контролирующее как далеко(?) продвинется рисунок. Чем меньше цифра, тем дальше «уедет».
К примеру, поставив 1, он «уезжает» далеко за пределы сайта. Его действие аналогично duration (сказал о нём в начале подраздела) . вспомнить:

ball.style.top = progress * 200 + ‘px’; — это выражение указывает рисунку мяча куда(?), и как далеко(?) нужно двигаться.
Поставив в него 500, мяч будет очень далеко «упрыгивать». Если вставить в него bottom вместо top (как есть сейчас), то мяч будет прыгать вверх.

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

Послесловие о движущихся рисунках

Конечно, показанные примеры создания движущихся рисунков с помощью JavaScript интересны, но есть и другие способы заставить рисунки двигаться.

И об одном из таких способов, на мой взгляд не менее интересном(!) , подробно, с примерами, узнаете здесь: «SVG-анимация» (откроется в новом окне) .

Ну, а самый простой способ создания движущихся рисунков — только с помощью HTML(!) — найдёте в подразделе «Движущийся рекламный текст-рисунок» страницы «Текстовые эффекты» (откроется в новом окне) .

Посмотреть другие интересные примеры анимации рисунков сможете, вернувшись в общий раздел «JavaScript» , кликнув по нижней синей навигационной стрелке.

Все права защищены. Copyright © 2009 — Коротеев Владимир.

Учимся создавать анимированные эффекты с помощью 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-анимации не будут оказывать влияния на элементы до тех пор, пока не будет запущен первый ключевой кадр. Эффект будет прекращаться после воспроизведения последнего кадра.

В завершение

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

Мини-туториал по анимации в CSS и HTML5

Рассказываем, как сделать анимацию без использования JavaScript. Пишем страницу авторизации пользователя на CSS и HTML5.

За годы работы с Front End технологиями мне приходилось работать с разными способами анимации. В этой статье я хочу подробнее разобрать, как работает анимация в CSS без использования JavaScript.

В CSS есть свойство animation, которое позволяет анимировать практически любое свойство HTML элемента. Правило анимации указывается в блоке keyframes.

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

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

Создадим в HTML элемент с классом «element»:

В CSS создаем правило для анимации в блоке keyframes. Назовем анимацию changeColor. Анимация будет менять цвет фона объекта с красного на синий.

@keyframes changeColor < 0% < background-color: red; >100% < background-color: blue; >> 

Здесь 0% — это начало анимации, 100% — это конец анимации. Все что между движок CSS автоматически анимирует в плавное изменениe свойста, которое вы выбрали. В данном случае будет плавное изменение цвета.

Microsoft запустила бета-платформу Brainwave для обучения нейросетей

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

.element

Результат данной анимации будет выглядеть так:

Мы можем контролировать анимацию при помощи дополнительных свойств.

В данном примере после имени анимации мы указали скорость анимации (2s) и количество повторений (в данном случае бесконечное количество повторений infinite).

Существует несколько свойств анимации. Рассмотрим каждый из них:

• animation-name: имя анимации определенным правилом keyframes
• animation-duration: сколько времени займет один цикл анимации от 0% до 100%
• animation-timing-function: определяет кривые ускорения, такие как ease и linear
• animation-delay: время задержки между моментом загрузки элемента в браузере и началом анимации.
• animation-direction: указывает направление анимации. По умолчанию анимация идет от 0% до 100%. С помощью данного свойства можно сделать так, чтобы анимация шла в обратную сторону от 100% до 0% или каждый раз меняла направление.
• animation-iteration-count: количество повторений цикла анимации. Можно установить число или указать infinite для бесконечного повторения анимации.
• animation-fill-mode: устанавливает значение, которое устанавливается до начала или после окончания анимации. Например, можно указать, что после завершения всех циклов анимации фон элемента будет зеленый.
• animation-play-state: проигрывает/ставит на паузу анимацию

Свойства анимации указываются таким образом:

.element

Все эти свойства можно записать и одной строкой:

.element

Свойства анимации могут принимать значения, указанные в таблице:

Правило keyframes может иметь неограниченное количество шагов. Не обязательно только начало и конец. Можно указать значения и для середины цикла анимации:

@keyframes changeColor < 0% < background-color: red; >50% < background-color: yellow; >100% < background-color: blue; >> 

HTML элементу можно одновременно присвоить несколько анимаций. Давайте добавим нашему элементу анимацию move, которая будет двигать элемент влево и вправо.

Добавим новый блок keyframes

@keyframes move < 0% < margin-left: 0px; >100% < margin-left: 200px; >> 

Перечислим анимации через запятую

animation: changeColor 3s infinite, move 4s infinite alternate; 

Как видите, мы присвоили одному элементу одновременно 2 анимации: движение и смену цветов.

Практические примеры

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

Анимация спиннера загрузки

Очень часто можно увидеть во время загрузки контента вращающийся спиннер. Давайте создадим такой спиннер при помощи CSS анимации.

В этом примере мы использовали анимацию rotate, где зациклили вращение спиннера на 360 градусов.

@keyframes rotate < from to > 

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

animation: rotate 1.5s infinite linear 

Анимированная форма авторизации

Давайте создадим что-то посложнее. Например анимированную форму авторизации.

Сделаем зацикленную анимацию для кнопки Submit. Добавим анимированный эффект для наведения курсора на кнопку. Сделаем так же анимацию для лейблов Username и Password в момент, когда поля ввода в фокусе.

 
Login 
Username
 
Password
 Submit
  

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

Добавим статические стили в CSS, чтобы наша форма выглядела красиво:

html < height: 100%; >body < margin:0; padding:0; font-family: sans-serif; background: linear-gradient(#141e30, #243b55); >.login-box < position: absolute; top: 50%; left: 50%; width: 400px; padding: 40px; transform: translate(-50%, -50%); background: rgba(0,0,0,.5); box-sizing: border-box; box-shadow: 0 15px 25px rgba(0,0,0,.6); border-radius: 10px; >.login-box h2 < margin: 0 0 30px; padding: 0; color: #fff; text-align: center; >.login-box .user-box < position: relative; >.login-box .user-box input < width: 100%; padding: 10px 0; font-size: 16px; color: #fff; margin-bottom: 30px; border: none; border-bottom: 1px solid #fff; outline: none; background: transparent; >.login-box .user-box label < position: absolute; top:0; left: 0; padding: 10px 0; font-size: 16px; color: #fff; pointer-events: none; transition: .5s; >.login-box .user-box input:focus ~ label, .login-box .user-box input:valid ~ label < top: -20px; left: 0; color: #03e9f4; font-size: 12px; >.login-box form a < position: relative; display: inline-block; padding: 10px 20px; color: #03e9f4; font-size: 16px; text-decoration: none; text-transform: uppercase; overflow: hidden; transition: .5s; margin-top: 40px; letter-spacing: 4px >.login-box a:hover

Теперь добавим анимации. Анимировать мы будем элементы в кнопке Submit.

Добавим 4 блока keyframes с правилами анимации:

@keyframes btn-anim1 < 0% < left: -100%; >50%,100% < left: 100%; >> @keyframes btn-anim2 < 0% < top: -100%; >50%,100% < top: 100%; >> @keyframes btn-anim3 < 0% < right: -100%; >50%,100% < right: 100%; >> @keyframes btn-anim4 < 0% < bottom: -100%; >50%,100% < bottom: 100%; >> 

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

Добавим теперь эту анимацию каждому элементу:

.login-box a span:nth-child(1) < animation: btn-anim1 1s linear infinite; >.login-box a span:nth-child(2) < animation: btn-anim2 1s linear infinite; animation-delay: .25s >.login-box a span:nth-child(3) < animation: btn-anim3 1s linear infinite; animation-delay: .5s >.login-box a span:nth-child(4)

Как видите, мы добились стильной анимации, используя только HTML и CSS.

Заключение

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

Следите за новыми постами по любимым темам

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