28 CSS 动画基础
CSS 动画使网页更具吸引力，能够通过简单的CSS规则创建过渡和动画效果。本文将介绍CSS动画的基本概念和使用案例。
动画的基本概念
CSS动画通过定义从一个样式变化到另一个样式来增添视觉效果。主要有以下几个关键属性：
@keyframes：定义动画过程。animation：应用动画到元素。
关键帧（Keyframes）
使用 @keyframes 来创建动画。它定义了动画的名称及其状态变化。
1 | @keyframes example { |
在这个例子中，动画从红色背景和当前位置开始，最终变为黄色并向右移动100像素。
应用动画
使用 animation 属性将动画应用到元素上。示例代码如下：
1 | .box { |
属性详解
animation-name：指定动画名称（如example）。animation-duration：动画持续时间（如3s）。animation-iteration-count：动画迭代次数（如infinite表示无限次播放）。
动画案例
我们通过一个简单的示例来展示CSS动画的效果：
1 |
|
在这个示例中，我们创建一个蓝色的圆球，它通过 bounce 动画实现上下跳动的效果。
动画的平滑度
我们还可以使用 animation-timing-function 属性，使动画更加平滑。常用的值有：
ease：默认，动画会加速然后减速。linear：匀速。ease-in：加速。ease-out：减速。ease-in-out：加速后减速。
例如，使用 ease-in-out 来平滑过渡：
1 | .ball { |
结束语
CSS动画为网页增添了动感，掌握 @keyframes 和 animation 能让你的网页更具吸引力。在实际项目中，可以通过组合不同的动画效果来提升用户体验。尝试修改案例中的参数，观察不同效果带来的变化，掌握CSS动画的灵活使用。
28 CSS 动画基础
