07 — Transitions & Animations

.btn {
  position: relative;
  overflow: hidden;
  padding: 12px 28px;
  background: transparent;
  border: 2px solid #2d7a2d;
  color: #2d7a2d;
  cursor: pointer;
  transition: color .3s, transform .2s;
}

.btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: #2d7a2d;
  transform: translateX(-100%);
  transition: transform .3s ease;
  z-index: 0;
}

.btn span { position: relative; z-index: 1; }

.btn:hover { color: #fff; transform: translateY(-2px); }
.btn:hover::before { transform: translateX(0); }

Spinner

.spinner {
  width: 36px; height: 36px;
  border: 3px solid #ddd;
  border-top-color: #2d7a2d;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

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

Dots rebondissants

.dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: #2d7a2d;
  animation: bounce 1.2s ease-in-out infinite;
}
.dot:nth-child(2) { animation-delay: .2s; }
.dot:nth-child(3) { animation-delay: .4s; }

@keyframes bounce {
  0%, 80%, 100% { transform: scale(.6); opacity: .5; }
  40%           { transform: scale(1);  opacity: 1;  }
}

Pulse

.pulse {
  width: 24px; height: 24px;
  border-radius: 50%;
  background: #2d7a2d;
  animation: pulse 1.5s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { transform: scale(1);   opacity: 1;   }
  50%       { transform: scale(1.5); opacity: .4; }
}