Примеры animation css – мгновенные изменения, отрицательные задержки, анимация transform-origin и другое / Нордавинд corporate blog / Habr

Leave a Comment / Css / By /

CSS анимации. 30 крутых примеров

Крутые CSS анимации

CSS Анимация загрузки от patrikhjelm

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

See the Pen CSS loading animation by Patrik Hjelm (@patrikhjelm) on CodePen.

Анимированные иконки корзин от jonitrythall

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

See the Pen Animated Shopping Cart Icons by Joni Trythall (@jonitrythall) on CodePen.

Анимация иконки «гамбургер» с помощью CSS3 анимаций от Dawid Krajewski

Создан на чистом CSS, без использования каких либо скриптов на JS.

See the Pen Hamburger Icon CSS3 ONLY Animation by Dawid Krajewski (@DawidKrajewski) on CodePen.

Анимированный персонаж 404 от With An Es
Классный пример для 404 страницы, где разработчик работает на ошибками.

See the Pen 404 Animated Character by Mark Thomes (@WithAnEs) on CodePen.

Высадка на марс от mgitch
Приземление на Марс. Сделано на CSS.

See the Pen CSS Mars Landing by Mathew Gitchell (@mgitch) on CodePen.

Мстители от mariosmaselli
Герои-Мстители на CSS прямо на вашем сайте. Круто, не правда ли?

See the Pen CSS The Avengers by mario sanchez maselli (@mariosmaselli) on CodePen.

Переключатель День/Ночь от jsndks
Теперь вы можете переключать день и ночь с CSS. Гениальная идея.

See the Pen Pure CSS Day/Night Toggle Swith by Jason Dicks (@jsndks) on CodePen.

Анимация Google Now приложений от codecalm
Сторонние приложения от Google Now, теперь анимированы.

See the Pen Google Now 3rd Party Apps by Paweł Kuna (@codecalm) on CodePen.

Бегущий петух от judag

See the Pen clo clo by Judith Neumann (@judag) on CodePen.

Анимированная иконка меню от mariusbalaj
Простая идея анимированной иконки, которая меняется при прокрутке страницы.

See the Pen Menu icon animation (updated) by Marius Balaj (@mariusbalaj) on CodePen.

Еще один CSS загрузчик от Maseone
Гипнотизирует, не так ли?

See the Pen CSS preloader! by Paul (@Maseone) on CodePen.

Кнопка отправки от auginator
Кликните для потдверждения, и кнопка анимируется с загрузкой процесса, с показом результата.

See the Pen Submit Button (GSAP edition) by auginator (@auginator) on CodePen.

Эластичный SVG сайдбар в стиле Material Design от suez
Перетащите белую полосу вправо, чтобы увидеть эластичный эффект боковой панели.

See the Pen Elastic SVG Sidebar Material Design by Nikolay Talanov (@suez) on CodePen.

Кнопка с частицами от igcorreia
Удивительный эффект при наведении на кнопку.

See the Pen Particle Button made with Canvas and HTML5 #html5 #button #particle #css @codepen @igcorreia Check this by Ignacio Correia (@igcorreia) on CodePen.

Gooey кнопка от Lucas Bebber

See the Pen CSS Gooey Menu (Version 1) by Lucas Bebber (@lbebber) on CodePen.

Вращающаяся кнопка от hakimel
Кнопка с эффектом модального окна.

See the Pen Flipside by Hakim El Hattab (@hakimel) on CodePen.

Меню с настоящим гамбургером от CharlesSmart

Настоящий деликатес в меню.

See the Pen The ultimate hamburger menu by Charles (@CharlesSmart) on CodePen.

Мотоцикл от yy
Посмотрите на движущийся мотоцикл.

See the Pen Cruisin’ by Yusuf (@yy) on CodePen.

3D волна с помощью кубов от waddington

See the Pen 3d css cube wave by Kai Waddington (@waddington) on CodePen.

Эффект написания текста от drygiel
Вот подпись которая реализована не на GIF формате, а PNG анимации с CSS3.

See the Pen Signature animation by Damian Drygiel (@drygiel) on CodePen.

Градиентная анимация заднего фона от quasimondo

See the Pen Animated Background Gradient by Mario Klingemann (@quasimondo) on CodePen.

Иконка переключения на «световых мечах» из Звездных войн от rss

See the Pen Star Wars Toggle Icon Animation by Rıza Selçuk Saydam (@rss) on CodePen.

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

See the Pen Gif Style CSS3 Animation by Jascha Goltermann (@jascha) on CodePen.

Анимация для формы от fluxus
Анимированный карандаш появляется, когда текстовая форма в фокусе.

See the Pen Simple focus in/out input animation by Mirko Zorić (@fluxus) on CodePen.

Разноцветный треугольник от felpedefarias
Невероятная оптическая иллюзия, реализованная на CSS3.

See the Pen Chromatic triangle by felipedefarias (@felipedefarias) on CodePen.

Кофе-машина от thisisroger

See the Pen Coffee Maker Animation by Roger Flanagan (@thisisroger) on CodePen.

Анимированный динозавр Google Chrome от nickspiel
Помните того динозаврика, которого вы можете увидеть когда соединение отсутствует в популярном браузере?

See the Pen Chrome Dinosaur Animation by Nick Spiel (@nickspiel) on CodePen.

CSS тряска от elrumordelaliz
Наведите курсор, чтобы посмотреть эффект тряски на объектах.

See the Pen presenting CSShake by Lionel T (@elrumordelaluz) on CodePen.

Колыбель Ньютона от All Things Smitty
Шикарная идея, для показа загрузки.

See the Pen Newton’s Cradle Loader by Matt Smith (@AllThingsSmitty) on CodePen.

Анимация для модального окна от koolhaus

See the Pen Modal Animation Physics by Tey Tag (@koolhaus) on CodePen.

Шагающий робот от P233
Этот робот идет, и идет, и идет…

See the Pen 3D walking robot by Peiwen Lu (@P233) on CodePen.

Анимация для стрелок навигации страниц от Hakim

See the Pen Flexing pagination arrows by Hakim El Hattab (@hakimel) on CodePen.

Источник: http://www.hongkiat.com/

Свойство animation | CSS справочник

CSS свойства

Определение и применение

CSS свойство animation позволяет задать все свойства анимации в одном объявлении. Это свойство является короткой записью для следующих свойств:

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

Не забывайте в обязательном порядке указывать значение продолжительности анимации (animation-duration), иначе, анимация не будет проиграна, т.к. значение по умолчанию у этого свойства равно нулю.

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

Поддержка браузерами

CSS синтаксис:

animation:"name duration timing-function delay iteration-count direction fill-mode play-state"; /* имя анимации может быть указано в конце списка */

JavaScript синтаксис:

object.style.animation = "myAnimation 1s linear"

Значения свойства

ЗначениеОписание
animation-nameУказывает имя анимации/список анимаций, которые должны быть применены к выбранному элементу. Каждое имя указывает на правило (@keyframes), которое определяет значения свойств анимации. Значение по умолчанию none.
animation-durationОпределяет, сколько секунд или миллисекунд затрачивается на выполнение одного цикла анимации.
Значение по умолчанию 0.
animation-timing-functionОпределяет кривую скорости для анимации (используется математическая функция — кубическая кривая Безье). Кривая скорости определяет время анимации, используемое, чтобы изменить один набор стилей CSS на другой. Значение по умолчанию ease.
animation-delayОпределяет задержку для запуска анимации. Значение по умолчанию 0.
animation-iteration-countУказывает, сколько раз анимация должна быть воспроизведена. Значение по умолчанию 1.
animation-directionОпределяет будет ли анимация воспроизводиться в обратном направлении, или в виде чередующихся циклов. Значение по умолчанию normal.
animation-fill-modeЗадает стиль для элемента, когда анимация не воспроизводится (когда она будет закончена, или когда она имеет задержку, установленную свойством animation-delay ). Значение по умолчанию none.
animation-play-stateОпределяет состояние анимации (анимация воспроизводится, либо приостановлена). Значение по умолчанию running.

Версия CSS

CSS3

Наследуется

Нет.

Анимируемое

Нет.

Пример использования

<!DOCTYPE html>
<html>
<head>
	<title>Пример анимации на CSS</title>
<style> 
.test {
width: 100px; /* устанавливаем ширину блока */
height: 100px;  /* устанавливаем высоту блока */
position: relative;  /* элемент с относительным позиционированием */
animation: iliketomoveit 4s steps(3,start) 500ms infinite reverse; /* "name (имя анимации-как в @keyframes) duration(длительность) timing-function (кривая скорости - шаговая анимация) delay (задержка 500 миллисекунд) iteration-count (количество повторов анимации - бесконечно) direction (направление анимации - reverse(в обратном направлении) )" */ 
} 
@keyframes iliketomoveit {
	0%   {left: 0px;} /* задаем положение элемента при начале анимации */ 
	50% {left: 500px; border-radius: 50px; background: plum; } /* задаем смещение элемента относительно левого края, изменяем цвет заднего фона и определяем форму границ (скругление) */ 
	100% {left: 0px;background: green; } /* задаем первоначальное положение и задаем цвет заднего фона по завершению анимации */ 
} 
</style>
</head>
	<body>
		<div class = "test">none</div>
	</body>
</html>
Пример использования CSS свойства animation (анимация на CSS).CSS свойства

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

Анимация в CSS3

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

ВНИМАНИЕ! Поскольку в этом уроке мы с вами разберем анимацию, на картинках я вам пример ее работы продемонстрировать не смогу, поэтому смело открывайте редактор для кода и записывайте туда код, приведенный в этот статье.

Основы создания

Итак, прежде всего нужно начать с того, как ее создавать. Вы наверняка привыкли к тому, что любая вещь в css реализуется прописыванием нужному селектору нужных свойств с соответствующими значениями. Так вот, при создании анимации только этим не обойтись. Схема выглядит следующим образом:

Создаются сами эффекты переходов с помощью @keyframes

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

Анимация в CSS3

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

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

Синтаксис @keyframes

Собственно, мне проще будет объяснить вам все на готовом примере, пусть и очень простом. Вот он (код добавляется в css-файл):

@keyframes pulse{ 0%{font-size: 50px;} 50%{font-size: 60px;}} 100%{font-size: 50px;}}

@keyframes pulse{

0%{font-size: 50px;}

50%{font-size: 60px;}}

100%{font-size: 50px;}}

Анимация в CSS3

Итак, после ключевика @keyframes идет произвольное слово, которое будет выступать названием анимации. В нашем случае это “pulse”. Далее открываются фигурные скобки, в которых записываются нужные правила.

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

Ключевые слова from и to могут заменить процентную запись, они обозначают 0% и 100% соответственно, то есть начало и конец воспроизведения.

Применяем анимацию в действии

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

Выбрать элемент, для которого она будет применяться

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

Пробуем

В своем html-файле я создал блок с классом shadow, в котором располагается простая строка текста. Наша цель – применить анимационные эффекты, описанные нами ранее, к этому текстовому элементу.

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

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

animation-name: pulse; animation-duration: 2s;

animation-name: pulse;

animation-duration: 2s;

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

Чтобы управлять количеством повторений, существует еще одно свойство:

animation-iteration-count: 4;

animation-iteration-count: 4;

Таким образом, все повториться 4 раза, после чего прекратиться. Как вы понимаете, вместо четырех можно вписать любое число.

Бесконечная анимация в css3

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

Анимация в CSS3

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

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

animation-iteration-count: infinite;

animation-iteration-count: infinite;

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

Задержка перед началом

По умолчанию воспроизведение начинается после полной загрузки страницы. Этим поведением можно управлять с помощью свойства animation-delay. Его значение задается в секундах.

Направление

Еще одно интересное свойство – animation-direction. По умолчанию стоит как нормальное, если поставить reverse, то все описанные кадры будут выполняться в обратном направлении. Давайте проверим, в чем разница. Для этого я немного изменил эффект, добавив еще один кадр.

@keyframes pulse{ 0%{font-size: 50px;} 50%{font-size: 60px;} 70%{font-size: 80px;} 100%{font-size: 50px;}}

@keyframes pulse{

0%{font-size: 50px;}

50%{font-size: 60px;}

70%{font-size: 80px;}

100%{font-size: 50px;}}

Итак, при нормальном направлении в первой половине анимации размер шрифта увеличиться до 60 пикселей, потом он резко увеличиться еще раз, уже до 80-ти, после чего вернется в исходное положение.

Анимация в CSS3

Рис. 2. Исходный размер текста

Анимация в CSS3

Рис. 3. Размер шрифта почти в конце анимации, перед резким возвращением к исходному состоянию.

Теперь задаем:

animation-direction: reverse;

animation-direction: reverse;

Все перевернулось наоборот. Сначала текст увеличиться аж на 30 пикселей, до 80-ти, оставшуюся часть анимации он будет плавно уменьшаться, в конце концов вернув себе прежние размеры. Все просто.

Форма анимации

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

animation-timing-function: ease;

animation-timing-function: ease;

Выполнение начнется медленно, потом ускорится, а в конце вновь сбавит скорость. Кроме этого есть и другие эффекты: ease-in, ease-out, ease-in-out. Все их описывать не буду, можете сами попробовать применить их к элементам.

Сокращенная запись

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

animation: имя|длительность|форма|задержка|направление|число повторов

animation: имя|длительность|форма|задержка|направление|число повторов

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

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

Итак, это был пример анимации на css3, таковых примеров можно приводить еще много, но главное тут понять суть, разобраться с синтаксисом @keyframes и тогда никаких проблем и у вас не возникнет. Другие css3 свойства вы можете изучить в этом курсе. Подписывайтесь на наш блог, чтобы получать классные материалы по сайтостроению.

Анимация в CSS3

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее Анимация в CSS3

PSD to HTML

Верстка сайта на HTML5 и CSS3 с нуля

Смотреть

Анимация CSS3 для самых маленьких