Animations

Transforms

• Transform is used to move or skew elements. Like we used this in combination with positions to centre an element perfectly. transform: translate(-50%, -50%);

• Transform: translateX/Y, scale, rotate

• Transitions is used for little animation from one state to another. Like for hover we use it. transition: property duration delay timing-function;

.box {
  transition: transform 0.3s ease-in-out;
}
.box:hover {
  transform: scale(1.1);
}

Animations

• Animations: animation is a journey from initial position to final. It's done in two phases: creating animation using @keyframe and using animation using animation-name and animation-duration properties

• animation-fill-mode means what to do after the animation window is over. none/forward/backward/both

• animation-iteration-count defines how many times animation to show

• animation-direction to reverse normal or alternate

• animation-timing-function default is ease but can change it to linear, ease-in/out, Cubic Bezier

@keyframes name{
 from{}
 to{}
}

/* advanced animation */
@keyframes name{
  0%{}
  50%{}
  100%{}
}

/* and some more properties */
box {
  animation-name: manga;
  animation-duration: 2s;
  animation-delay: 1s;
  // final state kya hoga
  animation-fill-mode: forward/backward;
  animation-iteration-count: 3;
  // normal chalega ya reverse ya fir normal and reverse 
  // alternate
  animation-direction: normal/reverse/alternate;
  // animation ka graph
  animation-timing-functiom: ease-in;
}