An Interest In:
Web News this Week
- April 26, 2024
- April 25, 2024
- April 24, 2024
- April 23, 2024
- April 22, 2024
- April 21, 2024
- April 20, 2024
Some of Our Sources
- Team Treehouse
- Smashing Magazine
- Smashing Apps
- TutsPlus - Design
- Fuel Your Creativity
- Web Design Ledger
- CSS Tricks
- Design Modo
- Hashedout
- The Verge
Help Webnuz
Referal links:
How to use Animate CSS and create stunning effects in seconds? - 3 projects
This article was originally published at https://www.blog.duomly.com/how-to-use-animate-css-tutorial-with-examples/
A few years ago, I was working on a mobile app project where the user interface was pretty advanced, loaded with lots of movement and gradients. It was just like each of those modern mobile apps, which would like to provide the best visual experience to users.
It took me lots of time to create all the animations in CSS and make them smooth and good looking according to designer instructions. Then, I started to look for some solution that will make this task more comfortable and will give me the required result without any surprises.
Thats exactly how I found Animate.css library, and from the beginning, I decided its what I need. I personally think that many front-end developers really love this library, as it allows us to make UI really stunning.
Today Id like to give you an easy tutorial on how to use Animate.css library step by step to help you jump into this awesome resource.
P.S. If you are the one who prefers to watch instead of reading, join us on our youtube channel where we post all our tutorials as a video.
Lets get started!
1. What is the animation.css library?
As a creator of the library wrote on the website, its just-add-water CSS animations. Its very simple to use a library, which can be downloaded as a one CSS file and added to your project to use one of many predefined animations by adding a class to an element.
You can customize selected animations by setting the delay and speed of the effect. Its possible to use animations with pure HTML and CSS projects, but you can also implement Javascript as well.
2. Installation
There are two ways to start using the Animate.css library. If you are using npm or yarn, its enough to install it using one of the following commands:
$ npm install animate.css --save
or$ yarn add animate.css
But if you are not using any of them, just download a minified .css file or get a CDN and load it in the head section of your main file like in the code below:
<head> <link rel="stylesheet" href="animate.min.css"></head>Or with CDN:
<head> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css"></head>Besides the very easy installation, Animate.css contains just one file, so it doesnt affect the loading time really much, and the performance of the page is still safe.
3. How to add any animation to an element on your page?
Now, Id like to explain to you step by step how you can add any of the available animations to an element on your page.
Lets imagine you have an h1 element on your page, and you want to add a bounce animation. In every element, its necessary to add animated class, and if you wish it to be infinite, then, of course, add infinite class.
After that, you have to specify the type of animation you selected as another class, in our case, bounce. Lets take a look at the example:
And voila! It works really nicely. You can also set some more parameters, and you can style it manually or add other classes according to the tables below:
Table - Delay Time
Table - Speed Time
Or you can style it manually like other animations in CSS, check the example below:
h1 { animation-duration: 2s; animation-delay: 1s; animation-iteration-count: 5;}Now, when its more clear how to use it, lets learn about different usage of animations given by the Animation.CSS library on three different examples.
4. Loading animations
Each layout needs a loader to attract users while waiting for data. Animate.css can help us with creating a pretty animation for any layout. Lets try it!
I decided to use flip animation for three nested elements. Two most inner elements have a delay, so it means that the animations on those elements start 1 or 2 seconds later. Each element has a speed set to slower, which, according to the table, means 3s.
5. Navigation
Almost every page needs navigation, some of them have a typical horizontal one, but nowadays, its very common to use a toggle menu. Its modern, responsive, user friendly, and for sure, it will help clients to remember your website.
Heres an example of using Animate.css effects in the toggle menu with pure Javascript.
6. Form
The last project Id like to show you in this article using Animate.css library is a form with simple validation.
Id like to add a shaking effect for the input element while the field is required but not filled in.
Heres the implementation:
Conclusion
As you could see in the few examples above, animations can bring lots of life and beauty to the UI.
It also makes the user experience much better because what can be better than a shaking field showing that this is the one that misses the value?
Its possible to create many beautiful and advanced animations in CSS from scratch, you can check a short cheat sheet for animations in one of our previous articles, but its much easier and comfortable to use a dedicated library like Animate.css. Especially that it is so small that it wont hurt the performance of the website.
Let us know in the comments if you tried to use Animate.css or any other library to create beautiful animations on your layouts. If yes, share your opinion. If not, maybe thats the time to try?
Thank you for reading,
Anna from Duomly
Original Link: https://dev.to/duomly/how-to-use-animate-css-and-create-stunning-effects-in-seconds-3-projects-1m9o
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To