In this tutorial we will learn to create animations with CSS3 easily Animate.css library
Sometimes we need to make animations on our site or web project quickly and easily, for this I present to Animate.css, a CSS3 library to create animations easily.
We learn to work with it, first download the library CSS3 the following link:Animate.css , by clicking on the link "Download Animate.css".
Once downloaded, we will create our basic HTML structure and add a link to the file "animate.min.css" previously we downloaded.
< Html >
< head >
< link rel = " stylesheet " href = " animate.min.css " >
</ head >
< body >
</ Body >
</ html >
Once this is done we can already show different types of animations on our website, for this, within the affected item should add some values in the "class" property as the following:
- animated: To identify the element to animate.
- infinite: For animation follow an infinite loop.
- animation (eg shake.): The animation as such animation "shake" can be replaced by any of the more than 70 animations offered by the library.
Consider the following example with animation "shake":
Now, add 2 more animations in parallel for more possibilities:
Thus we have seen that with the use of this library we can create animations without JavaScript or knowledge of CSS3, it is advisable to learn CSS3 and know the workings of these animations for formation theme, optimization and to create our own animations.
Remember that you can review all animations before using them in the following linkAnimate.css