🎨 CSS 动画示例大全

基础动画示例

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

.box {
  animation: fadeIn 2s ease-in-out;
}

关键帧动画示例

@keyframes slideLeft {
  0% { transform: translateX(0); }
  100% { transform: translateX(-100px); }
}

.card {
  animation: slideLeft 1.5s infinite alternate;
}

过渡效果示例

.button {
  transition: background-color 0.3s, transform 0.2s;
}

.button:hover {
  background-color: #4CAF50;
  transform: scale(1.1);
}

扩展阅读

想要深入学习CSS动画的实现原理？可以访问CSS动画教程了解更详细的内容。