How to Apply animations in angular project
Posted By : Nikita Agarwal | 31-Oct-2019
Animations:
Animations makes it possible to animate one CSS style configuration to another.
Animations consist of two sections, a style section describing the animations to be applied and the other is set of keyframes indicating the start and end states of the animated style, as well as possible intermediate waypoints.
1. Css animations are easier to use and apply over without having knowledge of javascript, but the use of javascript to apply animation makes it very easy.
2. Less Load Time
Some of the main key parts for applying animations include:
1. @keyframes: With the use of keyframes the animation will gradually change from the current style to the new style.
2. animation-iteration-count: Sets how many times the animation should iterate.
3. animation-delay: Specifies the delay before start of the animation. The delay also includes the negative value and it shows like the animation is working from before.
4. animation-direction: Specifies whether an animation should play in which direction i.e forward, backward, reverse, etc.
5. animation-timing-function: Specifies speed of curve of the animation.
There are types for animation-timing:
ease - animation having a slow start, then faster, then end slowly.
linear - animation having the same speed from start to end
ease-in - animation having a slow start
ease-out - animation having a slow end
ease-in-out - animation having slow start and end
cubic-bezier(n,n,n,n) -Allows defining self cubic-bezier function for animation.
6. animation-fill-mode: Specify Fill mode of the animation.
none - This is default value.No styles are applied.
forwards - This property retains style values.
backwards - The property will get the style values that is set by the first keyframe.
both - Follows rules of both forward and backward.
7.animation-name: specifies the name of the animation.
8.aniamtion-play-state: specify the state for animation i.e playing or paused.
ex:
div {
animation-name: example;
animation-duration: 5s;
animation-timing-function: linear;
animation-delay: 2s;
animation-iteration-count: infinite;
animation-direction: alternate;
}
Short code for the whole animation:
div {
animation: example 5s linear 2s infinite alternate;
}
CSS Transitions:
CSS transitions allows to change property values smoothly, over a given period of time.
1.Transition:A property used to merge all transitions in one.
2.Transition-delay:Specify delay in transition.
3.Transition-duration:how much time is taken to complete a transition.
4.Transition-Property: Specify name of a transition.
5.Transition-timing
#div1 {transition-timing-function: linear;}
#div2 {transition-timing-function: ease;}
#div3 {transition-timing-function: ease-in;}
#div4 {transition-timing-function: ease-out;}
#div5 {transition-timing-function: ease-in-out;}
Ex:
div {
transition-property: width;
transition-duration: 2s;
transition-timing-function: linear;
transition-delay: 1s;
}
Short Code:
div {
transition: width 2s linear 1s;
}
For Using Animations in angular:
Can use a library "Animate.css" for applying easy animations just by using a class name in your HTML code.
You can install this library in your angular project:
1.npm install web-animations.js --save
2.Import the module in your app.module file
You can use easy animations with this.
Also you can make custom animations. ANgular provides state and transitions for applying animations
You can write something like this:
trigger('fade' ,[
state('void' , style({
opacity: 0;
}));
transition('void => *' , [
animate(2000)
])
])
Use this fade property in HTML.
Also, you can make a reusable animation class and export this into your ts file.
Thanks
Cookies are important to the proper functioning of a site. To improve your experience, we use cookies to remember log-in details and provide secure log-in, collect statistics to optimize site functionality, and deliver content tailored to your interests. Click Agree and Proceed to accept cookies and go directly to the site or click on View Cookie Settings to see detailed descriptions of the types of cookies and choose whether to accept certain cookies while on the site.
About Author
Nikita Agarwal
Nikita Agarwal is a front-end developer and have a good knowledge of HTML , CSS ,Javascipt and Bootstrap and Angular