CSS animation allowing you to animate HTML elements using only CSS classes. It does not require JavaScript, nor extensive setup or configuration.
CSS animations allow you to create fancy eye-catching websites, parallel sliders, control, animated hover effects, 3D effects, entries, and exit animations per element.
Although, many CSS frameworks have their own built-in CSS animation classes, as Tailwind, many developers prefer creating their own animation classes or using external CSS animation libraries.
In this post, we offer you the best independent CSS animation library and framework which are also open source and free to use in all sort of projects.
1- AnimXYZ
AnimXYZ helps you create, customize, and compose animations for your website. Powered by CSS variables to allow a nearly limitless number of unique animations without writing a single key frame. Save time and have complete control over how your elements move. Built for Vue, React, SCSS, and CSS, AnimXYZ will bring your website to life.
2- MAGIC CSS Animation
Magic is a lightweight tiny CSS animation library that works in all modern browsers without any external dependencies.
Magic offers smooth fancy animation for entry, exit, hover, and click events.
3- Animate.css
Animate CSS is an outstanding rich CSS animation library for adding lively animation to your website.
Animate.css is a lightweight simple rich library of ready-to-use, cross-browser animations for use in your web projects. Great for emphasis, home pages, sliders, and attention-guiding hints.
4- Vivify
Vivify is a free open source pure CSS library with dozens of fancy animations that allows you to add animated fancy effects for every element.
You can also control how fast you want your animation, customize animation timing, and even add infinite classes to make your animation run until the page is closed.
5- Motus
Motus allows developers to create beautiful animations that simulate CSS key frames and are applied when the user scrolls. You can create page scrollable animation, page parallax, and it supports vertical and horizontal scrolling.
6- Izmir
Izmir is a mini CSS library allowing you to quickly create beautiful image hover elements. Packed with a host of styling classes and custom properties, Izmir allows you total control and almost limitless possibilities.
Simply load the CSS library in to your project, add the element markup combined with the style classes of your choice to custom build your perfect image hover effect.
Izmir features
1000's of possible style combinations
20 animated border effects
9 animated image effect
12 animated text effects
Overlay style classes
Animation delay classes
Text layout classes
Collection of custom properties to further custom style your element
Border width
Border margin
Border color
Primary color
Secondary color
Text color
Image hover opacity
Image hover color
Image hover gradient
Accessible (hover triggered on focus)
Minimal file size (2 KB GZipped)
Complete documentation
7- Mimic.css
Mimic is a simple CSS animation library with awesome animation sets, that does not require any external dependency, and it works smoothly on all browsers.
Mimic.css is released as an open source under the MIT license.
8- All Animation.css
All Animation.css is a set of nice and crazy CSS animations made with the purpose to bring life and interactions to your project. They are cross-browser animations which will give more emphasis on your pages likes sliding controls and 3D animation effects.
9- Typed.css
Typed.css is a fully functional typewriter mixin for CSS preprocessors, currently supporting in SCSS, and soon adding support for Less and Stylus as well.
Typed.css supports multiple strings, multi-line strings, variable speeds, per-string styling, animated caret (blinking insertion cursor), directional type-pausing, and much more. It's even accessible!
10- Trigger
Trigger is a CSS library animation for JavaScript projects, which you can easily install and embed directly in your project.
If you know of any other open source library that we missed, let us know.
"I see in 3D" (iCn3D) Structure Viewer is not only a web-based 3D viewer, but also a structure analysis tool interactively or in the batch mode using NodeJS scripts based on the npm package icn3d. iCn3D synchronizes the display of 3D structure, 2D interaction, and 1D sequences and
A browser cookie is a small file of information that a web server generates and sends to your web browser.
What are cookies used for?
Here’s why they matter and how they’re used:
1. User Sessions:
Cookies associate website activity with a specific user. For instance, when you
As an avid healthcare blog with a deep focus on open-source technologies for healthcare and education, we excited to share some top-notch open-source HIPAA-compliant tools that are transforming the landscape of healthcare app development.
While this post will focus on the open-source techs, our next posts will focus on several
Navigating the world of web development can be a bit overwhelming, especially when you're trying to find the right tools to launch your startup or complete a client's project on time.
Enter Next.js, a fantastic React framework that's here to make your life
What is ChadNext?
ChadNext is a quick starter template for Next.js projects, offering features like Next.js 14 App router, Shadcn UI, LuciaAuth, Prisma, Server Actions, Stripe, and Internationalization.
Streamline Rapid Development
It aims to streamline development, allowing for rapid prototyping, easy authentication, database interaction, and efficient deployment, ultimately
As Notion introduced a new editing style that resembles Medium Editor but comes with dozens of extra modular features, it has significantly impacted the development community. This new editor style offers enhanced flexibility and a more user-friendly experience, which many developers have found incredibly appealing.
Consequently, numerous developers have started
This is a full-stack Notion clone built with Next.js 13, React, Convex(Real-time database), Tailwind CSS, and more.
You can check the demo here.
Features
* Real-time database 🔗
* Notion-style editor 📝
* Light and Dark mode 🌓
* Infinite children documents 🌲
* Trash can & soft delete 🗑️
* Authentication 🔐
* File upload
* File deletion
* File replacement
* Icons
If you're looking for an open-source, free software to create a stunning photo gallery, look no further than the Next.js Photo Gallery with Beautiful Lightbox Support. As an open-source project, it provides you with the freedom to customize and adapt the software to your specific needs without
As the world continues to evolve digitally, businesses are constantly seeking innovative ways to keep up with the pace. Among the emerging trends that have revolutionized the eCommerce landscape is headless commerce, a relatively new concept that separates the front-end from the back-end of an eCommerce platform.
Along with this,
A bookmark manager is a tool that allows users to store, categorize, and retrieve Internet bookmarks, also known as favorites. With the vast amount of information available online, it's easy to lose track of useful websites or resources.
Bookmark managers help to prevent this by providing a centralized