30 крутых css анимаций

30 примеров CSS анимации

  • 24, Апрель, 2015

Крутые 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/