火狐浏览器使用animation

火狐浏览器（Firefox）也支持CSS动画，它允许开发者通过CSS的 `@keyframes` 规则来创建复杂的动画序列。以下是创建简单动画的基本步骤：

1. **定义动画关键帧**:
使用 `@keyframes` 规则声明动画的不同状态。例如：

   @keyframes example {
     0% {background-color: red;}
     50% {background-color: yellow;}
     100% {background-color: green;}
   }

这里定义了一个从红色渐变到黄色再渐变到绿色的动画。

2. **应用动画到元素**:
对需要执行动画的HTML元素设置 `animation` 属性，比如：

   .my-element {
     animation-name: example;
     animation-duration: 2s; /* 动画持续时间 */
     animation-timing-function: ease-in-out; /* 动画速度曲线 */
     animation-iteration-count: infinite; /* 动画重复次数，默认无限次 */
   }

3. **其他动画属性**:
- `animation-delay`: 开始动画之前的时间延迟。
- `animation-direction`: 变换动画的方向（例如，交替方向或循环）。
- `animation-fill-mode`: 定义动画在开始前和结束后的行为（例如，保持当前样式或回退到初始状态）。

火狐浏览器对CSS动画的支持与Chrome和Safari相当，开发者可以充分利用其强大的性能和兼容性来创造丰富的视觉效果。