Animation - C S S

Transform
- transform: scale(2);
  - scale: N; => Scales in x & y direction equally
  - scale: N1 N2;
  - scale: N1 N2 N3;
- transform: translate(2em 2em);
  - transform: translateX(2em);
  - transform: translateY(2em);
    - translate: Npx; => Moves right by given value
    - translate: N1px N2px;
    - translate: N1px N2px N3px;
- transform: rotate(2deg);
  - rotate: Ndeg; => Rotates in clock-wise direction
  - rotate: x Ndeg; => Rotates in x direction
  - rotate: 1 0 1 Ndeg; => Rotates in only given direction
- transform: skew(2deg);
- transform-origin: center/0;
Transition
- transition: property-name transition-duration transition-timing-function transition-delay;
  - transition: 250ms ease-in-out; => Simplest way to add animation
- transition-property: property-name/all;
- transition-timing-function: ease-in/ease-out;
Animation
- animation: animation-name animation-duration animation-timing-function animation-delay animation-iteration-count animation-direction;
  - animation-iteration-count: 2/infinite;
  - animation-fill-mode: forwards/alternate;
  - animation-timing-function: ease-in/ease-in-out/ease-out;
  - KeyFrames
```
    @keyframes animation-name {
        from{}
        to{}
        50%{}
    }
```