CSS3 Animations are taking the world by storm, a new but handy CSS Animation Library named Tuesday.css has come to the market giving a strong fight to Animate.css which we are already aware of.
Check this Out: How to Use Animate.css
After going through Tuesday.css it seems like the next GitHub project has many more new CSS animations that we haven’t seen so far.
Tuesday.css the new CSS3 Animation Library was built by Shakr Media.
Tuesday.css was built so as to meet the daily needs of the various web developers and designers as Tuesday.css can be integrated into a wider variety of websites and also in many web based apps UI design.
Integrating Tuesday.css will give you freedom from writing animation CSS or keyframes to each and every headings and section. Just call the Tuesday.css class and you are done.
How to use Tuesday.css?
First:
Step 1: Download ZIP file from GitHub and just add the .css file to your page.
Step 2: You can also include the compiled CSS file in the <head> of your website.
<head> <link rel="stylesheet" type="text/css" href="css/tuesday.min.css" /> </head>
Second:
You can also use the CDN of Tuesday.css, here’s how:
Tuesday.css CDN:
Just insert the below link in the header file or in the <head> section of your website.
<link rel="stylesheet" type="text/css" href="//cdn.rawgit.com/ShakrMedia/tuesday/master/build/tuesday.min.css" />
Now you are done with the integration:
It’s time to play with animations using the new CSS Animation library Tuesday.css
<h1 id="custom-text" class="animated tdFadeIn">It's Tuluzz</h1>
Note: All Tuesday animation names start with td prefix. It is also necessary to use the keyword animated before the exact class of Tuesday.
After this, you will see that the element you used will get the FadeIn animation instantly.
Third:
The third way is the most preferred and advance way of integrating the CSS files.
Using LESS source file
Step 1: Download ZIP file from GitHub and just add the .css file to your page.
Step 2: Import the source file (tuesday.less) to your site LESS stylesheet using the below command:
@import 'tuesday.less';
Recommended Readings:
- Beautify your website using CSS3 Hover Over Effects
- Create Javascript Animation using Bounce.js
- Add a Typewriter Effect using jQuery
Step 3: Apply the animation to the elements by calling out the classes and ID’s.
h1#custom-text {
.animated;
.tdFadeIn;
}
This will animate the heading element and you can check out the animation.
Note:
If you want custom delays for your animation to start you can also use the animation-delay: (n)s CSS property.
If you also want to control the duration of the animation for the element you can also use animation-duration: (n)s CSS property.
Check out the full documentation and various CSS Animation list here.
Now let’s have a look on some of the animations of Tuesday.css that are in highlight.
- tdFadeIn
- tdFadeOut
- tdStampIn
- tdShrinkIn
- tdExpandInBounce
- tdSwingOut
- tdPlopInDown
- tdHingeFlipIn
and much more.
Check out the list of animations available on the demo page of the Shakr Media.
![\"DMCA.com](\"//images.dmca.com/Badges/dmca_protected_sml_120l.png?ID=4d9e9c3d-af1d-4344-95f0-d4db66a25c1f\")
Leave a Reply