CSS Animation Examples

1. Fade In

.fade-in {
  animation: fadeIn 2s;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

2. Slide In from Left

.slide-in-left {
  animation: slideInLeft 1s ease-out;
}

@keyframes slideInLeft {
  from {
    transform: translateX(-100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

3. Pulse Effect

.pulse {
  animation: pulse 1.5s infinite;
}

@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.1); }
  100% { transform: scale(1); }
}

4. Bounce

.bounce {
  animation: bounce 1s infinite;
}

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

5. Rotation

.rotate {
  animation: rotate 3s linear infinite;
}

@keyframes rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

6. Color Change

.color-change {
  animation: colorChange 3s infinite;
}

@keyframes colorChange {
  0% { background-color: #3498db; }
  33% { background-color: #e74c3c; }
  66% { background-color: #2ecc71; }
  100% { background-color: #3498db; }
}

7. Shake

.shake {
  animation: shake 0.5s infinite;
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-10px); }
  75% { transform: translateX(10px); }
}

8. Flip

.flip {
  animation: flip 2s infinite;
  transform-style: preserve-3d;
}

@keyframes flip {
  0% { transform: perspective(400px) rotateY(0); }
  100% { transform: perspective(400px) rotateY(360deg); }
}

Animation Properties Explained

/* Basic Animation Syntax */
.element {
  animation: name duration timing-function delay iteration-count direction fill-mode;
}

/* Example */
.element {
  animation: bounce 1s ease-in-out 0.5s infinite alternate forwards;
}

/* Properties Explained */
- name: The name of the @keyframes animation
- duration: How long the animation takes (e.g., 1s, 300ms)
- timing-function: How the animation progresses (e.g., ease, linear, ease-in, ease-out)
- delay: Time before the animation starts (e.g., 0.5s)
- iteration-count: How many times to run (e.g., 3, infinite)
- direction: Animation direction (normal, reverse, alternate, alternate-reverse)
- fill-mode: What styles apply before/after (none, forwards, backwards, both)