Крутые и бесплатные примеры CSS анимации для вдохновения

22 983 любопытных

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

Так же рекомендую к просмотру:

Анимированные точки на CSS

See the Pen <a href="https://codepen.io/patrikhjelm/pen/hItqn">CSS loading animation</a> by Patrik Hjelm (<a href="https://codepen.io/patrikhjelm">@patrikhjelm</a>) on <a href="https://codepen.io">CodePen</a>.

Анимированные иконки на чистом CSS

See the Pen <a href="https://codepen.io/jonitrythall/pen/kzcnC">Animated Shopping Cart Icons</a> by Joni Trythall (<a href="https://codepen.io/jonitrythall">@jonitrythall</a>) on <a href="https://codepen.io">CodePen</a>.

Значок меню с красивой анимацией

See the Pen <a href="https://codepen.io/DawidKrajewski/pen/GgErVO">Hamburger Icon CSS3 ONLY Animation</a> by Dawid Krajewski (<a href="https://codepen.io/DawidKrajewski">@DawidKrajewski</a>) on <a href="https://codepen.io">CodePen</a>.

Отличная страница 404 с красивой анимацией

See the Pen <a href="https://codepen.io/WithAnEs/pen/Fxzei">404 Animated Character</a> by Mark Thomes (<a href="https://codepen.io/WithAnEs">@WithAnEs</a>) on <a href="https://codepen.io">CodePen</a>.

Анимированный Марс

See the Pen <a href="https://codepen.io/mgitch/pen/pECcD">CSS Mars Landing</a> by Mathew Gitchell (<a href="https://codepen.io/mgitch">@mgitch</a>) on <a href="https://codepen.io">CodePen</a>.

Супергерои на CSS

See the Pen <a href="https://codepen.io/mariosmaselli/pen/ghmwq">CSS The Avengers </a> by mario s maselli (<a href="https://codepen.io/mariosmaselli">@mariosmaselli</a>) on <a href="https://codepen.io">CodePen</a>.

Анимированные иконки Google Now

See the Pen <a href="https://codepen.io/codecalm/pen/wBgLYN">Google Now 3rd Party Apps</a> by Paweł Kuna (<a href="https://codepen.io/codecalm">@codecalm</a>) on <a href="https://codepen.io">CodePen</a>.

Очень красивые анимированные точки на CSS

See the Pen <a href="https://codepen.io/Maseone/pen/rGapf">CSS preloader!</a> by Paul (<a href="https://codepen.io/Maseone">@Maseone</a>) on <a href="https://codepen.io">CodePen</a>.

Отличная кнопка отправки с плавной анимацией

See the Pen <a href="https://codepen.io/auginator/pen/oElzF">Submit Button (GSAP edition)</a> by auginator (<a href="https://codepen.io/auginator">@auginator</a>) on <a href="https://codepen.io">CodePen</a>.

Крутой эффект для чата, чтобы заработало, тяни белую полоску

See the Pen <a href="https://codepen.io/suez/pen/emjwvP">Elastic SVG Sidebar Material Design</a> by Nikolay Talanov (<a href="https://codepen.io/suez">@suez</a>) on <a href="https://codepen.io">CodePen</a>.

Кнопка с невероятным эффектом при наведении

See the Pen <a href="https://codepen.io/igcorreia/pen/vEzmyV">Particle Button made with Canvas and HTML5 #html5 #button #particle #css @codepen @igcorreia Check this</a> by Ignacio Correia (<a href="https://codepen.io/igcorreia">@igcorreia</a>) on <a href="https://codepen.io">CodePen</a>.

Кнопка меню с липкой анимацией

See the Pen <a href="https://codepen.io/lbebber/pen/LELBEo">Gooey Menu</a> by Lucas Bebber (<a href="https://codepen.io/lbebber">@lbebber</a>) on <a href="https://codepen.io">CodePen</a>.

Анимированное модальное окно с кнопкой

See the Pen <a href="https://codepen.io/hakimel/pen/ZYRgwB">Flipside</a> by Hakim El Hattab (<a href="https://codepen.io/hakimel">@hakimel</a>) on <a href="https://codepen.io">CodePen</a>.

Стильное и красивое меню для сайта, кликай на Гамбургер

See the Pen <a href="https://codepen.io/CharlesSmart/pen/gbdaOa">The ultimate hamburger menu</a> by Charles (<a href="https://codepen.io/CharlesSmart">@CharlesSmart</a>) on <a href="https://codepen.io">CodePen</a>.

Анимированный мотоцикл

See the Pen <a href="https://codepen.io/yy/pen/YPjEZw">Cruisin’</a> by Yusuf (<a href="https://codepen.io/yy">@yy</a>) on <a href="https://codepen.io">CodePen</a>.

Крутые и анимированные кубы на чистом CSS

See the Pen <a href="https://codepen.io/waddington/pen/ucCIF">3d css cube wave</a> by Kai Waddington (<a href="https://codepen.io/waddington">@waddington</a>) on <a href="https://codepen.io">CodePen</a>.

Анимированный фон для сайта

See the Pen <a href="https://codepen.io/quasimondo/pen/lDdrF">Animated Background Gradient</a> by Mario Klingemann (<a href="https://codepen.io/quasimondo">@quasimondo</a>) on <a href="https://codepen.io">CodePen</a>.

Иконки меню с красивой анимацией бесплатно

See the Pen <a href="https://codepen.io/rss/pen/vIDKH">Star Wars Toggle Icon Animation</a> by Rıza Selçuk Saydam (<a href="https://codepen.io/rss">@rss</a>) on <a href="https://codepen.io">CodePen</a>.

Крутой пример анимации на CSS3

See the Pen <a href="https://codepen.io/felipedefarias/pen/yiBjr">Chromatic triangle</a> by Pita (<a href="https://codepen.io/felipedefarias">@felipedefarias</a>) on <a href="https://codepen.io">CodePen</a>.

Тряска различных объектов на CSS

See the Pen <a href="https://codepen.io/elrumordelaluz/pen/pHKcC">presenting CSShake</a> by Lionel T (<a href="https://codepen.io/elrumordelaluz">@elrumordelaluz</a>) on <a href="https://codepen.io">CodePen</a>.

Точки с простой и плавной анимацией

See the Pen <a href="https://codepen.io/AllThingsSmitty/pen/zxGyXd">Newton’s Cradle Loader</a> by Matt Smith (<a href="https://codepen.io/AllThingsSmitty">@AllThingsSmitty</a>) on <a href="https://codepen.io">CodePen</a>.

Ещё одно модальное, всплывающее окно

See the Pen <a href="https://codepen.io/pix3l/pen/ajwcE">Modal Animation Physics</a> by Tey Tag (<a href="https://codepen.io/pix3l">@pix3l</a>) on <a href="https://codepen.io">CodePen</a>.

Стрелки вперёд и назад с анимацией на CSS

See the Pen <a href="https://codepen.io/hakimel/pen/gfIsk">Flexing pagination arrows</a> by Hakim El Hattab (<a href="https://codepen.io/hakimel">@hakimel</a>) on <a href="https://codepen.io">CodePen</a>.