Transitions, Transforms & Animations

Transitions

A transition smoothly animates a property from one value to another, instead of it snapping instantly — most often used with :hover, :focus, or a class toggled by JavaScript.

.btn {
  background: #C41230;
  transform: scale(1);
  transition: background 0.3s ease, transform 0.3s ease;
}
.btn:hover {
  background: #a30f28;
  transform: scale(1.05);
}

/* Shorthand: property duration timing-function delay */
.card {
  transition: all 0.25s ease-in-out 0s;
}

Common timing functions: ease (default, starts fast then slows), linear (constant speed), ease-in, ease-out, ease-in-out, or a custom cubic-bezier(...) curve.

2D & 3D Transforms

.a { transform: translate(20px, 10px); }  /* move right 20px, down 10px */
.b { transform: scale(1.2); }             /* 120% size */
.c { transform: scale(1.2, 0.8); }        /* different x and y scale */
.d { transform: rotate(15deg); }
.e { transform: skew(10deg, 0deg); }

/* Combine multiple transforms — space separated, applied left to right */
.f { transform: translateX(10px) rotate(5deg) scale(1.1); }

/* 3D transforms need a perspective, usually set on the parent */
.card-wrap { perspective: 800px; }
.card {
  transform: rotateY(20deg);
  transition: transform 0.4s ease;
}
.card:hover {
  transform: rotateY(0deg);
}

/* Change the pivot point transforms rotate/scale around */
.g { transform-origin: top left; }

Keyframe Animations

For animations more complex than a simple two-state transition — multiple steps, looping, delays — use @keyframes:

@keyframes bounce {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(-20px); }
  100% { transform: translateY(0); }
}

.ball {
  animation-name: bounce;
  animation-duration: 1s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite; /* or a number, e.g. 3 */
  animation-direction: alternate;

  /* Shorthand: name duration timing-function delay iteration-count direction fill-mode */
  animation: bounce 1s ease-in-out infinite alternate;
}

/* Fade-and-slide-in effect, common for cards appearing on scroll */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.reveal {
  animation: fadeInUp 0.6s ease-out forwards;
}

animation-fill-mode: forwards keeps the element in its final keyframe state after the animation finishes, instead of snapping back to its original CSS.