• Transform
  • transform: scale(x, y) (Scales the element)
  • transform: rotate(deg) (Rotates the element)
  • transform: translate(x, y) (Moves the element)
  • transform: skew(x, y) (Skews the element)
• Transition

transition: property duration timing-function delay;

• property (What to animate)
• duration (Animation duration)
• timing-function (Speed curve, e.g., ease-in-out)
• delay (Delay before animation starts)
• Animation

animation: name duration timing-function delay iteration-count direction;

• name (Keyframe animation name)

• duration (Total animation time)

• timing-function (Easing method) ease, linear, ease-in-out

• delay (Time before animation starts)

• iteration-count (Number of times the animation plays) infinite

• direction (Forward, reverse, alternate, normal, and alternate-reverse)

• Keyframes

  @keyframes fadeIn {
    0% { opacity: 0; }
    100% { opacity: 1; }
  }