CSS Advanced

CSS Animations & Transitions

Add life to your UI with CSS transitions, animations, transforms, and keyframes.

CSS Transitions

Transitions allow you to change property values smoothly over a given duration.

transition: property duration timing-function delay

Timing functions: ease, linear, ease-in, ease-out, ease-in-out, cubic-bezier(...)

CSS Animations

CSS animations allow animation of HTML elements without using JavaScript. An animation lets an element gradually change from one style to another.

Use @keyframes to define the animation sequence.

CSS Transforms

Transforms let you move, scale, rotate, and skew elements.

translate(x, y) — move
scale(x, y) — resize
rotate(deg) — rotate
skew(x, y) — slant

Example

css

/* Smooth hover transitions */
.btn {
  background: #6C5CE7;
  transition: all 0.2s ease;
}
.btn:hover {
  background: #5a4bd1;
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(108,92,231,0.4);
}

/* CSS Keyframe Animation */
@keyframes fadeSlideUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.hero-title {
  animation: fadeSlideUp 0.6s ease-out forwards;
}

/* Staggered animations */
.card:nth-child(1) { animation-delay: 0s; }
.card:nth-child(2) { animation-delay: 0.1s; }
.card:nth-child(3) { animation-delay: 0.2s; }

/* Shimmer loading effect */
@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

.skeleton {
  background: linear-gradient(90deg,
    #1A1A24 25%, #2A2A3A 50%, #1A1A24 75%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}

Try it yourself — CSS