37 лучших примеров CSS-анимации из сотен обзоров CSS-анимации на рынке codepen.io, основанных на рейтинге Avada Commerce. Ниже Вы можете найти бесплатные примеры CSS-анимации.
Я немного заморочился и сверстал карточки участников codepen.io, а точнее создателей CSS анимации которых я сегодня представляю Вашему вниманию! По моему мнению мы должны не только смотреть и применять наработки дизайнеров, аниматоров Pure CSS и программистов, но и знать их в лицо! Что смог, нарыл про них на просторах интернета. И так начнём с наших умных и красивых девчёнок:
Julia Miocene
Дизайнер цифровых продуктов, аниматор Pure CSS, эксперт по веб-разработчикам Google.
Почти лет создаёт продукты для людей и бизнеса. В настоящее время работает в Яндексе, Санкт-Петербург дизайнером продукта. Работала в Газпром нефти, Сбербанке, Контуре и др.
Ниже анимационный пример настолько красочен, что изображает старого лесного колдуна, вселяющего душу для предметов в своей лаборатории. Он собирает материалы вместе и формирует их в форме животного, после чего новорожденное существо оживает благодаря колдовству из готовых химикатов колдуна. Сцена настолько прекрасна, что, пока колдун поглощен своей работой, множество внешних лесных животных с любопытством наблюдают за ним.
Ещё один анимационный пример от Юлии. Два пухлых зайца мило беседуют, смеются и пьют мартини сидя где-то в городском кафе!
В данном примере CSS-анимации показаны короткие сюжеты из жизни различных людей, каждый из которых занимается своими делами или находятся на отдыхе и делают селфи!
Хорошая картина: вечерний лес, костерок и на вертеле жарится жирный поросёнок! Гораздо проще CSS-анимация чем в предыдущих вариантах, но смотрится красиво. Сделано со вкусом!
Красивая анимация вечернего пейзажа. Плывут облака, падает лёгкий снег и крутиться мельница. Прекрасная подложка для главной страницы сайта.
Боевая операция спецподразделения! Интересная CSS анимация показывающая работу подразделения S.W.A.T.
Уже все известный велосипедист который мчится быстрее ветра с проплывающими на заднем фоне облаками. Прекрасная анимация!
Два беспокойных голубя, однин из которых работает за компьютером, а другого мучает жажда :) Довольно старая работа Юли, уже практически во всех блогах крутится! Анимация стоит того.
Анимация картины Malika Favre, показано как эта картина на самом дела появилась. Юля восхищает своими идеями!
Непонятная непонятность :) но очень красиво смотрится, что-то фантастическое и прекрасный пример CSS-анимации.
Загадочный и сложный многоуровнивый квест The Oasis для двух девочек по сложному замку! Сложная пошаговая анимация :)
Ekaterina Vasilyeva
Анимация, бренд / графический дизайн.
Абсолютно впечатляет, несмотря на его простой внешний вид, благодаря уникальной структуре и идее. Екатерина Васильева, автор, оформила текст H2O в виде химической колбы. Поскольку это изображение представляет собой живую анимацию, видно, что одна из двух крышек выпадает, что приводит к переливу воды из колбы, а также внутри колбы плавают пузырьки. Всего одним щелчком мыши, чтобы установить и встроить его на свою страницу, вы получите совершенно особый фон, который привлечет ваших зрителей с первого взгляда.
Загадочно улыбающийся и развалившийся в полумраке кот. Анимация простенькая, но смотрится довольно привлекательно :)
Аgathaco
Разработчик программного обеспечения и подрядчик с слабостью к веб-дизайну и анимации.
Специализируется на JavaScript и имеет профессиональный опыт работы с React и Node, но также большой поклонник Vue. В свободное время любит экспериментировать с иллюстрациями и анимацией с помощью кода и создавать забавные вещи.
Анимированая илюстрация к фильму про маленького волшебника который варит своё волшебное зелье, а на окне устроился кот и смотрит как за окном летет приведение!
Оригинальная анимированая страница 404, прекрасно подойдёт под любой Ваш проект, любой тематики и направления!
Эта CSS-анимация очень хорошо подойдёт для главной страницы блога или личного сайта и будет привлекать своей динамикой поситителей :) Прокрутите вниз в контент с анимацией и увидите всю прелесть!!!
Довольно симпатичный пример анимации под названием CSS Box Dog обеспечивает визуализацию собаки в форме светло-коричневого ящика, которая прыгает на другой настоящий большой картонный контейнер. Очаровательный щенок кажется очень энергичным и довольным тем, что он постоянно прыгает и трясет ушами и хвостом. Этот пример настолько красочен, что состоит из пяти разных цветовых тонов.
В этом примере анимации всё довольно просто, ракета летает за курсором мыши испуская конфети!
Вращающиеся в пространстве кубики прекрасно подойдут для заднего фона страницы с текстом. Абсолютно приглушонные цвета и размытось тут кстати.
Eva Santos
Иллюстрация и веб-программирование. Любит рисовать.
У испанской художницы Евы Сантос всё в основном на мистическую тему и в донном случае свисающий паук плавно перемещающийса из стороны в сторону. Незамысловатая анимация, но смотрится красиво!
В продолжении местической темы Евы мы видим ведьму колдующую над чаном с зельем и сидящего рядом чёрного кота. Тоже всё очень простенько, но красиво!
И очередная CSS-анимация посвещена ночному и закадочному приключению на улице города, грациозно идущий чёрный кот. Любит Ева всё связанное с темнотой, мистикой и кошками!
С овершенная противоположность идеям которые представлены выше. Болото и на листе сидит лягушка, наблюдающая над летающей над ней мухой.
Sarah Drasner
Отмеченный наградами спикер, вице-президент по опыту разработчиков в Netlify, член основной команды Vue и штатный писатель в CSS-Tricks. Занимала должность главного руководителя отдела развивающихся рынков, облачных защитников в Microsoft и менеджера по пользовательскому опыту и проектированию в Trulia/Zillow Group. Является автором SVG-анимаций от O'Reilly и проводила семинары Frontend Masters, вляется соорганизатором ConcatenateConf, бесплатной конференции для нигерийских и кенийских разработчиков. Является соучредителем семинаров по веб-анимации вместе с Вэл Хэдом. В течение 15 лет она работала веб-разработчиком, а иногда работала научным иллюстратором и профессором на греческих островах.
Н азывается "Любовь роботов". Чистая и красивая прорисовка роботов и движение по сказочному лесу. Отличная заставка!
Н называется "Любовь роботов - дубль 2". Те же персонажи остановились в лесу и плавно покачиваются. Если водить по экрану нажав левую кнопку мыши, то будет тянутся шлейф из сердечек и между роботами появится большое сердце!
М мчащийся по ночному лесу всадник без головы. Отличная CSS анимация для halloween. Красиво тут нечего больше сказать!
Анимация сделана для поздравления с десятилетним юбилеем Smashing Magazine. Даже после того как конфети закончели сыпаться глаза героя продолжают моргать. Просто и со вкусом!
Интересная анимация в которой объеденены и поочерёдно меняются объекты: подарок, сумка в стиле Алиэкспресс и тележка!
Ну вот примеры красивых и умных девчёнок закончились и мы переходим к мальчишкам со всего мира!
Mario Duarte
Разработчик из Лондона. Любит технику и искусство, от живописи до фотографии.
Кусочек вечерней природы с горящим огнём.
Cameron Fitzwilliam
Веб-разработчик / дизайнер. Развивал свои творческие медиа-навыки с раннего подросткового возраста, информационные технологии всегда были мотивирующей силой. Это позволило разработать креативные и оптимизированные решения для целого ряда требований. Наслаждается творческим аспектом, но в равной степени расцветает, когда необходим аналитический подход.
К ак о данной CSS-анимации написал сам Камерон: «Я использовал Pug и SCSS (компас), Pug будет очень полезен для создания нескольких элементов (фоновых звезд). Я также реализовал ParallaxJS, который может дать другую перспективу, когда пользователь перемещает курсор.»
Плачущий новорожденный младенец у которого вылетела соска изо рта, а бутылочку взять сам не может! Прикольная анимация!
Vangel Tzo
Дизайнер продуктов полного цикла, живущий в Афинах. В настоящее время работает в Skroutz в качестве ведущего менеджера по дизайну продуктов.
Рок был разработан Вангелем Тзо с основным оттенком розового цвета. Особенным его сделало то, что Rock — это живое изображение, украшенное слегка дрожащей рукой, держащей смартфон, с движением разноцветных кругов. Жест этой руки похож на «рок», потому что он соответствует текстовой строке «Рок» позади, что мотивирует аудиторию чувствовать себя как-то оживленно и хотеть присоединиться к вам на шумной вечеринке.
Ashish Bardhan
Программирование и работа в области UI/UX больше лет.
Ракета не взлёте в кружке, как часто делает Ашиш Бардхан, именно в круге! Интересная анимация хорошо подойдёт для логотипа на сайте, чем привлечёт посетителей живым логотипом!
Эта анимация представляет собой построенную из кирпичей ветряную мельницу на травяном поле. Ветряк имеет 4 длинных широких крыла, которые постоянно вращаются. Небо довольно оранжевое с полностью круглым сияющим солнцем. Сцена показана только внутри круга, однако она по-прежнему приносит зрителям атмосферу умиротворения.
Очередная CSS-анимация от любителя всего крулого Ашиша Бардхана. Тут мы видем пальму, солнце и необитаемый остров посреди бесконечного окиана!
Любителям пива эта анимация будет напоминать о холодном и пенном напитке и так-же прекрасно может найти место на каком нибудь сайте посвященном любимому напитку!
Jon Kantner
Разработчик интерфейса в OneTrust. Занимаюсь веб-дизайном и разработкой с 2012 года. Большой опыт работы с HTML, CSS, JavaScript, PHP, MySQL и рядом интерфейсных библиотек и фреймворков.
Ядаже не знаю как описать эту анимацию, но смотрится красиво и эффектно!
Надеюсь Вам понравилась моя подборка!
