アニメーション付きアラート

<!-- フェードインアニメーション付きアラート -->
<div class="alert alert-success alert-fade">
    <strong>完了！</strong> フェードインアニメーション付きのアラートです。
</div>

/* 基本アラートスタイル */
.alert {
  display: block;
  padding: 12px 16px;
  margin: 8px 0;
  border: 1px solid transparent;
  border-radius: 4px;
  position: relative;
}

.alert:before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  border-radius: 4px 0 0 4px;
}

/* 成功アラート */
.alert-success {
  color: #155724;
  background-color: #d4edda;
  border-color: #c3e6cb;
}

.alert-success:before {
  background-color: #28a745;
}

/* フェードインアニメーション */
.alert-fade {
  animation: fadeIn 0.5s ease-in;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}