动画已经成为提升用户体验的重要工具。无论是一个轻微的按钮悬停效果，还是一个复杂的卡片翻转动画，恰到好处的动画不仅可以引导用户注意力，还能提升界面的交互性与趣味性。
1. 为什么要使用UI动画？
增强用户体验：动画可以让用户感受到界面的响应，减少冷冰冰的感觉。
引导用户注意力：通过动画效果，可以突出重点内容或引导用户操作。
改善视觉反馈：按钮、卡片等元素的悬停、点击动画能够提供即时的视觉反馈。
2. 按钮动画效果
在上方的示例中，按钮通过 hover 和 transition 属性实现了平滑的动画效果：
.button {
transition: background 0.3s ease, transform 0.2s ease;
}
.button:hover {
background: #005EA6;
transform: translateY(-3px);
}3. 卡片动画效果
卡片动画结合了 hover 和 active 事件，添加了缩放和阴影变化：
.card:hover {
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
transform: translateY(-5px);
}
.card:active {
transform: scale(0.95);
}4. 更多的互动元素
当用户悬停在卡片上时，可以显示额外的内容：
.card .more-info {
display: none;
}
.card:hover .more-info {
display: block;
}
