Making Your Portfolio Feel Alive

Small animations make a portfolio feel professional and modern. CSS gives you two tools: transitions (smooth changes on hover) and animations (keyframe sequences that run on load).

Hover Transitions

.btn {
  background: #00bcd4;
  transition: background 0.3s ease, transform 0.2s ease;
}
.btn:hover {
  background: #0097a7;
  transform: translateY(-2px);
}

Always put transition on the normal state, not the :hover state — that way the animation plays both ways (in and out).

Keyframe Fade-In

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
.hero h1 {
  animation: fadeUp 0.7s ease both;
}

Card Hover Effect

.card {
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 40px rgba(0,0,0,.15);
}