deals

premiumdeals & css animations (58 items)

Pure CSS Animations for creating stunning effects in websites and apps like CSS parallax, hovers, transitions, expansions, as well as animated elements, icons, progress bars, animated spinners, loaders, and everything you'll need for taking your designs to the next level.

freebies

This is a Parallax 3D effect, achieved by an arrange of images in HTML and pure CSS, using transforms and keyframe animations on the images. Create...

This is a Parallax 3D effect, achieved by an arrange of images in HTML and pure CSS, using transforms and keyframe animations on the images. Created by CodePen user Samuelllr.

This is a search bar that on click expands to showcase the input area and featuring a smooth loading animation when querying the search. The on-cli...

This is a search bar that on click expands to showcase the input area and featuring a smooth loading animation when querying the search. The on-click and search bar actions are processed through Javascript and the animations are created with CSS composed with Sass. Created by CodePen user Aaron Iker.

A set of demonstrative text effects built with the Javascript library Splitting.js. These animations/transitions are all done with CSS after using ...

A set of demonstrative text effects built with the Javascript library Splitting.js. These animations/transitions are all done with CSS after using the Splitting micro-library that adds helper spans and CSS variables. Created by CodePen user Shaw.

Lifetime Access: Social Media Management Tool. Feature Rich Platform With Unlimited Social Media Profiles & Projects At No Extra Cost. Pay Once, Us...

Lifetime Access: Social Media Management Tool. Feature Rich Platform With Unlimited Social Media Profiles & Projects At No Extra Cost. Pay Once, Use Forever!

This is a set of 8 animated elements that can be perfectly set as loaders. The animations are achieved via keyframes in CSS pre-compiled through SC...

This is a set of 8 animated elements that can be perfectly set as loaders. The animations are achieved via keyframes in CSS pre-compiled through SCSS. Created by CodePen user Paolo Duzioni.

A droplet scroll animation for the three-lined button on a navbar. It helps saving space in your website by avoiding sticky or auto-hide options on...

A droplet scroll animation for the three-lined button on a navbar. It helps saving space in your website by avoiding sticky or auto-hide options on scrollbars. This menu also makes use of a flat style art keeping it simple yet stylish. Created by CodePen user Leon Heess.

A collection of 6 animated Google loaders built in SCSS. The elements animations are smooth and balanced with no visual lag, and each with unique s...

A collection of 6 animated Google loaders built in SCSS. The elements animations are smooth and balanced with no visual lag, and each with unique shape and motion. Created by CodePen user Amine Bahmed.

2390+ Vector Design Assets, 446 Ready-Made Logo Templates, Only $19: Editable Ai, EPS, CDR Formats, Huge Variety Of Content, Commercial Use. Over $...

2390+ Vector Design Assets, 446 Ready-Made Logo Templates, Only $19: Editable Ai, EPS, CDR Formats, Huge Variety Of Content, Commercial Use. Over $3214 In Valuable Assets

A lightweight CSS animation library that consists only of animations that don't cause reflows and repaints of a website when used correctly. The Ba...

A lightweight CSS animation library that consists only of animations that don't cause reflows and repaints of a website when used correctly. The Basic idea is to remove the transition from the element, not to apply it while animating. It saves the user a tiny lag before animation starts and feels super smooth. Created by Github dev Anna Migas under MIT License.

A set of CSS loading animations created with three dots, keeping it minimal on design and inbuilt due that animations are created out of a single e...

A set of CSS loading animations created with three dots, keeping it minimal on design and inbuilt due that animations are created out of a single element. Among its features, you have elastic, pulse, collision and carousel animations, and some other that are more on the experimental side. Created by Zongbin under MIT license.

Beautiful northern aurora lights animation for footer sections built in pure CSS. In a nutshell, CSS animates and modify size and colors of the ele...

Beautiful northern aurora lights animation for footer sections built in pure CSS. In a nutshell, CSS animates and modify size and colors of the element's bottom section; to make the desired impact, neon colors are used over a black background. Element created by CodePen user Amit Ashok Kamble.

13,200+ Vector Icons, Only $29: Unique Flat & Line Illustrations, Pixel Perfect EPS, Ai, SVG Formats, 50+ Icon Categories , Commercial Use

13,200+ Vector Icons, Only $29: Unique Flat & Line Illustrations, Pixel Perfect EPS, Ai, SVG Formats, 50+ Icon Categories , Commercial Use

A CSS3 animation library with animations that are more vibrant than most simple animations. Additionally, the library includes some wicked animatio...

A CSS3 animation library with animations that are more vibrant than most simple animations. Additionally, the library includes some wicked animations that can be fun to play with. You can find all you need in one CSS file; then you'll be ready to start adding animation to your content with simple classes. Developed by Kristoffer Andreasen.

This is a set of multiple animation examples for navbars. In total the author made 15 navbars, differentiated by color, each one with a differ...

This is a set of multiple animation examples for navbars. In total the author made 15 navbars, differentiated by color, each one with a different set of animations triggered by hovering over them. The motions are generated with CSS.

A snippet by Codepen user Olivia featuring beautifully animated Moleskine notebooks made in pure CSS. When hovered over, the notebooks animate by t...

A snippet by Codepen user Olivia featuring beautifully animated Moleskine notebooks made in pure CSS. When hovered over, the notebooks animate by tilting sideways and opening up. There are 4 variations: plain, ruled, dotted, and squared, featuring different color schemes.

Awesome Website Widgets Bundle, Only $19: HTML, CSS, JS & Sketch Files, Animated & Styled, Clean Code, Use Ready

Awesome Website Widgets Bundle, Only $19: HTML, CSS, JS & Sketch Files, Animated & Styled, Clean Code, Use Ready

A snippet made in CSS for a magazine flip-open preview animation. Created by Codepen user Jamie Coulter.

A snippet made in CSS for a magazine flip-open preview animation. Created by Codepen user Jamie Coulter.

A nice snippet with a collection of Facebook reaction emojis, animated with pure CSS by Codepen user Ashish Bardhan. 

A nice snippet with a collection of Facebook reaction emojis, animated with pure CSS by Codepen user Ashish Bardhan. 

Orbital icons based on the work of Dribbble user Rob Whotton. Features 15 icons with space/orbital motifs, depicting satelites, moon, orbits, teles...

Orbital icons based on the work of Dribbble user Rob Whotton. Features 15 icons with space/orbital motifs, depicting satelites, moon, orbits, telescopes, rockets, comets, and much more. Animations made by Codepen Pieter Biesemans.

370+ Magazine Pages, 70 Brochure Pages from 16 Professional Editorial Templates for Adobe InDesign. IDML & INDD Format, A4 210 x 297 mm, US Letter ...

370+ Magazine Pages, 70 Brochure Pages from 16 Professional Editorial Templates for Adobe InDesign. IDML & INDD Format, A4 210 x 297 mm, US Letter (8.5 x 11 inches). Only 19$! (93%Off).

Neat looking loading animation made purely in CSS by Codepen user Onno, this loader features a smooth, clean animation of droplets falling off the ...

Neat looking loading animation made purely in CSS by Codepen user Onno, this loader features a smooth, clean animation of droplets falling off the rectangle that goes along the text to signify loading is in progress.

Mimic.css is a class animations library that features several neat animations, easily integrated by adding the mimic.css stylesheet to the of your...

Mimic.css is a class animations library that features several neat animations, easily integrated by adding the mimic.css stylesheet to the of your HTML document. To animate, add the class animated to your element, with any of the mimic.css classes.

Great looking pure CSS animation triggered by hovering over the button, this colorful snippet by codepen user Cassidy Williams can be used for many...

Great looking pure CSS animation triggered by hovering over the button, this colorful snippet by codepen user Cassidy Williams can be used for many purposes, like website/app loading animations, button selection, etc.

7300+ Unique Presentation Slides PowerPoint & Keynote Templates Bundle, Only $12 USD! Drag n' Drop Easy Edition, Vector Elements, Ready to print! (...

7300+ Unique Presentation Slides PowerPoint & Keynote Templates Bundle, Only $12 USD! Drag n' Drop Easy Edition, Vector Elements, Ready to print! (98% OFF)

Based on dribbble users' Riccardo Cavallo contact animation, this CSS snippet uploaded to Codepen by user Aaron Taylor is a neat piece that deploys...

Based on dribbble users' Riccardo Cavallo contact animation, this CSS snippet uploaded to Codepen by user Aaron Taylor is a neat piece that deploys different options for contact upon interaction.

A CSS reminder app concept that can be used as is in mobile apps focused on exercising and fitness. This snippet has really cool features like a ba...

A CSS reminder app concept that can be used as is in mobile apps focused on exercising and fitness. This snippet has really cool features like a backward counter, an animated wave effect going from top to bottom, a menu that allows you to alternate among three different layouts (water, coffee time and office break), and language change.

This project mimics command line spinners like those from cli-spinners and brings them to the web. Each one is a fixed sized element with a pseudo ...

This project mimics command line spinners like those from cli-spinners and brings them to the web. Each one is a fixed sized element with a pseudo element with line breaks.

450 Halloween Design Assets, Vector Character & Scene Generator. 4 Design Styles. Over 60% Discount! Get This Spooky Promo Now For Only 9$!

450 Halloween Design Assets, Vector Character & Scene Generator. 4 Design Styles. Over 60% Discount! Get This Spooky Promo Now For Only 9$!

This a CSS animation effect for hovering over images. It comes with four different options for the content shown on hover. It is customizable and e...

This a CSS animation effect for hovering over images. It comes with four different options for the content shown on hover. It is customizable and easy to preview and copy to use on other sites.

This is a collection of animations for CSS-in-JS libraries from animate.css. They can be used with any inline style library that supports using obj...

This is a collection of animations for CSS-in-JS libraries from animate.css. They can be used with any inline style library that supports using objects to define keyframe animations, such as Radium or Aphrodite.

A simple library to take care of complex CSS animations. It can also add custom functions that do non-CSS animations. To use it simply install the ...

A simple library to take care of complex CSS animations. It can also add custom functions that do non-CSS animations. To use it simply install the package via npm or include the file as a script.

2880+ Vector Ornamental Drop Cap Lettering Designs Including Celtic, Gothic, Illuminated Manuscript, Gravure, And Many More Styles! Foil Effects fo...

2880+ Vector Ornamental Drop Cap Lettering Designs Including Celtic, Gothic, Illuminated Manuscript, Gravure, And Many More Styles! Foil Effects for Illustrator & Photoshop, As Well As Paper Textures & Mockups Included, Get This Bundle For Just $14! (95% Off)

The Background Segment Effect is an animation done with the CSS clip-path property and powered by anime.js. The effect replicates boxes from a back...

The Background Segment Effect is an animation done with the CSS clip-path property and powered by anime.js. The effect replicates boxes from a background and makes these boxes move in perspective towards the viewer.

Spinners is a collection of HTML and CSS animations for loading icons to show that is some content loading. All you have to do to use it is copy th...

Spinners is a collection of HTML and CSS animations for loading icons to show that is some content loading. All you have to do to use it is copy the Spinner's HTML and CSS code and paste it into your project.

This a CSS 3D effect for text, it wraps the text with an animation around a box. It has the option to customize the color, font family, shadows and...

This a CSS 3D effect for text, it wraps the text with an animation around a box. It has the option to customize the color, font family, shadows and the speed at which the text moves.

13,000+ Unique PowerPoint & Keynote Slides, 86 Best Selling Templates, Print Ready (A4 + Letter), Smart Objects, Vector Shapes, 160 Color Schemes, ...

13,000+ Unique PowerPoint & Keynote Slides, 86 Best Selling Templates, Print Ready (A4 + Letter), Smart Objects, Vector Shapes, 160 Color Schemes, Icon Fonts, 16:9 Aspect Ratio, Intros, Maps, Infographics, Tables, Calendars, Charts, and Much More! Get it for Only $19 (99% Off)

A library of CSS demos that you can use as an alternative to JavaScript. It includes toggles, carousels, games, menus, animations and others, it in...

A library of CSS demos that you can use as an alternative to JavaScript. It includes toggles, carousels, games, menus, animations and others, it includes the option to try the demos included in the page.

This snippet showcases a mainly couple of animations, one for the login another for the logout. It also has animations for the buttons and the tran...

This snippet showcases a mainly couple of animations, one for the login another for the logout. It also has animations for the buttons and the transitions, alongside a well-crafted login form.

This snippet utilizes a marketplace template as starting point in order to showcase the animation for the addition of an item to the cart.

This snippet utilizes a marketplace template as starting point in order to showcase the animation for the addition of an item to the cart.

Lifetime Web Development Course Access, Over 19 hours of indepth courses on HTML, CSS, Javascript, jQuery, Bootstrap, PHP, AJAX, XML, and much more...

Lifetime Web Development Course Access, Over 19 hours of indepth courses on HTML, CSS, Javascript, jQuery, Bootstrap, PHP, AJAX, XML, and much more, Includes certificate of completion! Become a Web Development Ninja for Just $17! (94% off)

This useful snippet-based web page presents a bouncy ball animation written in different techniques, allowing the users to compare the code structu...

This useful snippet-based web page presents a bouncy ball animation written in different techniques, allowing the users to compare the code structure within the multiple preprocessors, frameworks, as well as pure CSS.

A beautifully crafted profile box developed and animated in pure CSS placed on top of a JavaScript animated particles background.

A beautifully crafted profile box developed and animated in pure CSS placed on top of a JavaScript animated particles background.

A fantastic and interactive simulation where a cloth can be torn apart with the mouse pointer. Crafted in JavaScript.

A fantastic and interactive simulation where a cloth can be torn apart with the mouse pointer. Crafted in JavaScript.

330+ Unique Printing Templates Bundle, Includes 200+ Multi Purpose Flyer Templates, Corporate Identity Kit, Business Cards, Magazine Templates, Let...

330+ Unique Printing Templates Bundle, Includes 200+ Multi Purpose Flyer Templates, Corporate Identity Kit, Business Cards, Magazine Templates, Letterheards, Brochures, CV/Resume Templates, INDD, PSD, Ai, EPS File Formats. Get this Bundle Now For Just $29!

An amazing set of 12 blob style icons neatly created and animated in pure CSS.

An amazing set of 12 blob style icons neatly created and animated in pure CSS.

A very appealing sidebar menu that counts on slide-animated elements that represent the page that they'll show, the content of each page is also an...

A very appealing sidebar menu that counts on slide-animated elements that represent the page that they'll show, the content of each page is also animated with sliding effects making everything nice and coherent.

An amazing pure CSS animated vCard design nicely crafted in flat style featuring an avatar riding an animated scooter towards you inside a name & p...

An amazing pure CSS animated vCard design nicely crafted in flat style featuring an avatar riding an animated scooter towards you inside a name & profession ribbon featured card. As you hover over the card it expands vertically to show you social icons, and hovering over the avatar gives you a first person description of the profile owner.

40 Premium WordPress Plugins to Revamp Your Website! SEO Optimizing, Campaign Management, Quality Leads Generation & Capture, Page Building, Social...

40 Premium WordPress Plugins to Revamp Your Website! SEO Optimizing, Campaign Management, Quality Leads Generation & Capture, Page Building, Social Conversion Boosting, Mobile Optimizing, Browser Graphical Editors, Opt-In Content Delivery, and so much more! Only 19$!

Beautiful solar system CSS animation in 3D front view and 2D side view, zoom in, switchable between speed, size and distance mode for every planet.

Beautiful solar system CSS animation in 3D front view and 2D side view, zoom in, switchable between speed, size and distance mode for every planet.

This fun and delicious Codepen is a menu concept with a bouncing jelly scroll effect, items divided by color scheme, flat food icons and a nice cli...

This fun and delicious Codepen is a menu concept with a bouncing jelly scroll effect, items divided by color scheme, flat food icons and a nice click popping effect.

CSS flat design animation within a circular shape, all three of them are travel related featuring parallax movement, fade in text and a smooth zoom...

CSS flat design animation within a circular shape, all three of them are travel related featuring parallax movement, fade in text and a smooth zoom in.

Lifetime Access to ViVAThemes Entire WordPress Themes Collection, Includes Unrestricted Access to All 29 Professional Design Themes for Online Shop...

Lifetime Access to ViVAThemes Entire WordPress Themes Collection, Includes Unrestricted Access to All 29 Professional Design Themes for Online Shops with WooCommerce Integration, Portfolios, Startups, & Business Sites PLUS All Future Releases, Theme Updates, & Support. Only $29! (71% Off!)

CSS animated menu with interactive, colorful lines, smooth slide, fade in and pop up effects perfectly suitable to style navigation bars.

CSS animated menu with interactive, colorful lines, smooth slide, fade in and pop up effects perfectly suitable to style navigation bars.

A snippet for generating particle-based animations quite suitable for header or featured content background.

A snippet for generating particle-based animations quite suitable for header or featured content background.

An animated vector-based digital clock that features really nice up-popping effects crafted by Icebob who used GSAP for the animation.

An animated vector-based digital clock that features really nice up-popping effects crafted by Icebob who used GSAP for the animation.

220+ Professional Seamless Vector Patterns, Including AI, SVG & PDF Vector Files, High-Resolution PNGs, Only $9 USD! (70%OFF)

220+ Professional Seamless Vector Patterns, Including AI, SVG & PDF Vector Files, High-Resolution PNGs, Only $9 USD! (70%OFF)

A library made in CSS and JavaScript for animating elements and creating cool transitions between blocks. It can be used in different situations fo...

A library made in CSS and JavaScript for animating elements and creating cool transitions between blocks. It can be used in different situations for enhancing the appearance of your website or navigate between pages mobile applications. This plugin is licensed under MIT.

A set of magical animations for design elements like buttons or static images. This uses CSS only, and the animations include out effects, perspect...

A set of magical animations for design elements like buttons or static images. This uses CSS only, and the animations include out effects, perspective, rotate, slide, math, bomb, boing and off the space. The code is licensed under MIT

AniCollection is an online set of animations made in CSS3. They work for multiple purposes like focus the attention of the user, entrances, exists...

AniCollection is an online set of animations made in CSS3. They work for multiple purposes like focus the attention of the user, entrances, exists, fading effects, flippers, rotations, sliding effects and more. The effects can be saved and then downloaded in a bundle in CSS, HTML, jQuery or AniJS.

$1140 Worth of Vector T-shirt Designs for Just $29 (97% Off on 100 Designs)

$1140 Worth of Vector T-shirt Designs for Just $29 (97% Off on 100 Designs)

Quite an impressive SCSS ribbon animated with smooth sliding and fading in transitions at different times.

Quite an impressive SCSS ribbon animated with smooth sliding and fading in transitions at different times.

A nicely crafted JavaScript animation that gives your ribbon-featured logos quite a lot of life and action by loading and fading in bit by bit.

A nicely crafted JavaScript animation that gives your ribbon-featured logos quite a lot of life and action by loading and fading in bit by bit.

A set of animations made with CSS and a bit of JS applied to content boxes. It uses CSS transforms and animations to organize the content boxes, al...

A set of animations made with CSS and a bit of JS applied to content boxes. It uses CSS transforms and animations to organize the content boxes, allowing you to add more of them. They can be used in a blog or online magazine. This snippet was created by Monir Abu Hilal.

1050+ Isolated Food Items + Premade Scenes Bundle Only $15! (95 % Discount) Usually valued $306 USD

1050+ Isolated Food Items + Premade Scenes Bundle Only $15! (95 % Discount) Usually valued $306 USD

A gorgeous animation made in pure CSS for animating checkboxes. Once a checkbox is clicked, it gets illuminated and a check mark appears, and also ...

A gorgeous animation made in pure CSS for animating checkboxes. Once a checkbox is clicked, it gets illuminated and a check mark appears, and also the text changes its color to let the user know it is selected. This snippet was created by Dylan Raga.

A business card made with pure CSS transitions that animates when you hover over. At first, it shows the logo and the basic information (name and o...

A business card made with pure CSS transitions that animates when you hover over. At first, it shows the logo and the basic information (name and occupation). When hovered over, the card displays the social and contact information, like phone number, website and Twitter account. It was made by M. Alex Junaedi.

A compelling image slider made with CSS composed of two stacks of cards from which images get "picked up". This experimental slider uses CSS 3D tra...

A compelling image slider made with CSS composed of two stacks of cards from which images get "picked up". This experimental slider uses CSS 3D transforms and perspective. This work in modern browsers perfectly, but still has some bugs.

Lifetime (No monthly fees) Password Manager and Form Filler, Save time and Boost the Safety of your Passwords with Military-Grade Encryption, Only ...

Lifetime (No monthly fees) Password Manager and Form Filler, Save time and Boost the Safety of your Passwords with Military-Grade Encryption, Only for $29 USD! (80% OFF)

Animate.css is a collection of cool, fun, and cross-browser animations compiled in a library to use in your projects. They are great for emphasis, ...

Animate.css is a collection of cool, fun, and cross-browser animations compiled in a library to use in your projects. They are great for emphasis, home pages, sliders, and general just-add-water-awesomeness. It allows you creating custom and lightweight animations to style different design elements of your site. This library was created by Dan Eden Tweet

The Infinite Scrolling Background is an interesting concept of a background that never stops moving. If applied correctly, it can lead the user to ...

The Infinite Scrolling Background is an interesting concept of a background that never stops moving. If applied correctly, it can lead the user to think other elements are moving, like a starry sky and a rocket. This code snippet was created only with CSS and HTML, made and uploaded to Codepen by Scott Marshall.

A beautiful code snippet created with pure CSS for an animation that generates an attractive animated snow effect over an image that also has been ...

A beautiful code snippet created with pure CSS for an animation that generates an attractive animated snow effect over an image that also has been created with CSS. It can be used in a website, a mobile app or an email to wish a happy holiday to the users.

Get 2TB of Lifetime Cloud Storing One Single Payment, no monthly fees and Military Grade File Security normally priced $3600 only 49$, you can als...

Get 2TB of Lifetime Cloud Storing One Single Payment, no monthly fees and Military Grade File Security normally priced $3600 only 49$, you can also get the 1TB package worth $1800 just for $29.

Chris Violette designed this coming soon placeholder page for one of his clients and decided to add a unique feature for visitors with modern brows...

Chris Violette designed this coming soon placeholder page for one of his clients and decided to add a unique feature for visitors with modern browsers. After the graphics and layout were done, he added some keyframe animation to the body background image and the "burst" behind the logo. The background image is constantly moving, so it looks like the logo is moving. Also, it has a nice spinning effect.

Neil Carpenter share with us a funny text animation where the characters fly to the center and out of it. Besides, when the letters are not in the ...

Neil Carpenter share with us a funny text animation where the characters fly to the center and out of it. Besides, when the letters are not in the center, they are transformed into fuzzy circles. The transform of the characters has a bug if you are using IE 10; in Firefox the animation is very slow, but in webkit browsers like Chrome it works perfect.

LukyVj from CSSDeck has decided to apply a recently-found effect to this full-screen loader, with neat results. It shows three screens in total: A ...

LukyVj from CSSDeck has decided to apply a recently-found effect to this full-screen loader, with neat results. It shows three screens in total: A simple "download" button with a white background when inactive, switching to black on hover. Finally, when clicking on it, a spiralling couple of glowing arrows signify the start of the download.

800+ Seamless Patterns, Only $12: PAT File Format For Adobe Photoshop, Unlimited Commercial Use

800+ Seamless Patterns, Only $12: PAT File Format For Adobe Photoshop, Unlimited Commercial Use

An amazing set of hover transitions created by Shinji Yonetsu. It contains everything you can think of: Masks, gradations, floating effect, slides,...

An amazing set of hover transitions created by Shinji Yonetsu. It contains everything you can think of: Masks, gradations, floating effect, slides, accordions and more. It even includes advanced effects for the most skilled developers or those wanting to create truly impressive designs.