deals

premiumpacks & 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.

180+ Bootstrap v4 Website Themes & HTML Components, only $14:

180+ Bootstrap v4 Website Themes & HTML Components, only $14:

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.

Smashing Magazine's Complete Library, Only $29! Get Unlimited Access 60 eBooks About Web Design & Development With The Savvy & Expertise of Best Se...

Smashing Magazine's Complete Library, Only $29! Get Unlimited Access 60 eBooks About Web Design & Development With The Savvy & Expertise of Best Selling Authors On UX Design, Content Strategy, Best Design Practices, Freelancing, WordPress, and Much More! (93% Off)

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.

340+ Transparent Smoke Shapes, Brushes, Patterns, Fonts & Backgrounds, Only $19: High-Resolution Assets, Realistic Smoke Effects, Commercial License

340+ Transparent Smoke Shapes, Brushes, Patterns, Fonts & Backgrounds, Only $19: High-Resolution Assets, Realistic Smoke Effects, Commercial License

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.

100+ Unique Animal T-Shirt Designs & Illustrations, Only $14: Ai & EPS Vectors, Editable Texts, 100% Customizable & Resizable Designs For Commercia...

100+ Unique Animal T-Shirt Designs & Illustrations, Only $14: Ai & EPS Vectors, Editable Texts, 100% Customizable & Resizable Designs For Commercial Use

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.

31 Packs in 1 Huge Bundle: 200+ Low Poly 3D People Models, 3DS, OBJ, FBX, STL File Formats for VR, AR, Architectural Visualization, and Scale Graph...

31 Packs in 1 Huge Bundle: 200+ Low Poly 3D People Models, 3DS, OBJ, FBX, STL File Formats for VR, AR, Architectural Visualization, and Scale Graphics Projects! Only 29$ (82% 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.

Massive 23,000+ PowerPoint Presentation Slides Bundle, 2000+ Vector Icons, 3 Aspect Ratio Formats, Animated Transitions, Drag & Drop Image Placehol...

Massive 23,000+ PowerPoint Presentation Slides Bundle, 2000+ Vector Icons, 3 Aspect Ratio Formats, Animated Transitions, Drag & Drop Image Placeholders, Vector Shape Elements, Scalable World & USA State Maps, Infographics, Tons of Content More! Only 19$ (92% 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.

Stock Animation Assets Bundle, Over 250 Pre-Animated & Ready To Use Elements in Full HD. Without Prior Experience, You Can Create Beautiful Video A...

Stock Animation Assets Bundle, Over 250 Pre-Animated & Ready To Use Elements in Full HD. Without Prior Experience, You Can Create Beautiful Video Animations for eCommerce, Education, Business, Tutorials, & Much More, Only $29 (98% Off)

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.

1400 Logo Templates, Full Vector Files in Ai, PSD with Smart Objects, PNG, JPG, 8 Design Styles, From Colorful Designs to Black and White Corporate...

1400 Logo Templates, Full Vector Files in Ai, PSD with Smart Objects, PNG, JPG, 8 Design Styles, From Colorful Designs to Black and White Corporate Logos. Regular price 4200$ Get Them All for Just 12$! (100% 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.

Supercharge your workflow with hundreds of UI Elements, Responsive Layouts, Web UI Components, & Templates for prototyping apps, websites, and ...

Supercharge your workflow with hundreds of UI Elements, Responsive Layouts, Web UI Components, & Templates for prototyping apps, websites, and web apps from 16 awesome products for Sketch & Photoshop at a crazy 95% off. This bundle includes $667 worth of goodies which for a limited time you can get for just $29

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.

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)

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.

A brand new bundle of 33 fonts in a wide variety of styles, weights & multilanguage support, normally priced $490 if purchased individually, Only $...

A brand new bundle of 33 fonts in a wide variety of styles, weights & multilanguage support, normally priced $490 if purchased individually, Only $19 for a limited-time

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.

160+ Fonts Professional Sans-Serif Font Family, Only $25! True Italics & Small Caps For Each Weight, OpenType Features Like Small Caps, Stylistic S...

160+ Fonts Professional Sans-Serif Font Family, Only $25! True Italics & Small Caps For Each Weight, OpenType Features Like Small Caps, Stylistic Sets, Contextual Alternates, and Discretionary Ligatures. Commercial License Included!

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.

Get a Massive Collection of Fully Editable and Layered Vector T-shirt Designs. Customize completely all the designs to spread your word. Worth of $...

Get a Massive Collection of Fully Editable and Layered Vector T-shirt Designs. Customize completely all the designs to spread your word. Worth of $2000 USD of Graphics, Just for $20 in a unique 99% limited-time discount!

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.

Ultimate Tech Training Bundle: Lifetime Subscription for $19! 800+ Courses to learn Programming, Web Development, Software Testing, Mobile Apps, Ne...

Ultimate Tech Training Bundle: Lifetime Subscription for $19! 800+ Courses to learn Programming, Web Development, Software Testing, Mobile Apps, Networking, e-Commerce, Design, Data, IT Certifications, and much more! (98% 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.

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)

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.

720+ Lightroom Presets + 690+ Photoshop Actions from 17 Collections, Compatible with Adobe CS4, CS5, CS6, and CC, Fully Adjustable Settings, Includ...

720+ Lightroom Presets + 690+ Photoshop Actions from 17 Collections, Compatible with Adobe CS4, CS5, CS6, and CC, Fully Adjustable Settings, Includes Extended License and Complete Documentation. Only $19 (95% Off)

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 Access to Timelinr: High-Level Roadmaps, Timelines, & Kanban Boards, Take Your Planning & Task Coordination To The Next Level With This Aw...

Lifetime Access to Timelinr: High-Level Roadmaps, Timelines, & Kanban Boards, Take Your Planning & Task Coordination To The Next Level With This Awesome App For Just $37/Single User & $49/For 2 Users! (97% 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.

Lifetime Membership & 170+ Premium Responsive WordPress Themes Deal (99% Off)

Lifetime Membership & 170+ Premium Responsive WordPress Themes Deal (99% Off)

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.

I'm Creator Best Items: 900+ Hyper Quality Scene Creator Items from LStore! valued $107 Only $29 USD (73% Discount)

I'm Creator Best Items: 900+ Hyper Quality Scene Creator Items from LStore! valued $107 Only $29 USD (73% Discount)

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.