How to Apply animations in angular project

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