编辑“︁CSS动画时间函数”︁

{{DISPLAYTITLE:CSS动画时间函数}}  
{{Note|本文适用于CSS初学者及需要系统理解动画时间函数的开发者。所有示例均遵循最新CSS规范。}}  

== 概述 ==  
'''CSS动画时间函数'''（又称'''缓动函数'''，英文：''timing-function''）是控制动画过程中速度变化规律的函数，它决定了动画在每帧之间的'''插值方式'''。通过调整时间函数，开发者可以创建更自然的加速、减速或弹性效果，而不仅仅是线性匀速运动。  

在CSS中，时间函数通过以下属性指定：  
* <code>animation-timing-function</code>（用于关键帧动画）  
* <code>transition-timing-function</code>（用于过渡动画）  

== 基本类型 ==  
CSS预定义了5种基本时间函数，通过关键词调用：  

{| class="wikitable"  
! 函数名称 !! 效果描述 !! 数学曲线  
|-  
| <code>linear</code> || 匀速运动 || 线性函数（<math>y = x</math>）  
|-  
| <code>ease</code> || 默认值，先加速后减速 || 三次贝塞尔曲线(0.25, 0.1, 0.25, 1)  
|-  
| <code>ease-in</code> || 逐渐加速 || 三次贝塞尔曲线(0.42, 0, 1, 1)  
|-  
| <code>ease-out</code> || 逐渐减速 || 三次贝塞尔曲线(0, 0, 0.58, 1)  
|-  
| <code>ease-in-out</code> || 加速后减速 || 三次贝塞尔曲线(0.42, 0, 0.58, 1)  
|}  

=== 代码示例 ===  
<syntaxhighlight lang="css">  
/* 使用预定义函数 */  
.box {  
  transition: transform 2s ease-in-out;  
}  
.box:hover {  
  transform: translateX(200px);  
}  
</syntaxhighlight>  

== 高级控制：三次贝塞尔曲线 ==  
当预定义函数不满足需求时，可通过<code>cubic-bezier(p1, p2, p3, p4)</code>自定义速度曲线，其中参数<code>p1</code>和<code>p3</code>需在[0,1]范围内。  

=== 曲线编辑器可视化 ===  
<mermaid>  
graph LR  
  A[起点 (0,0)] --> B[控制点1 (p1,p2)]  
  C[终点 (1,1)] --> D[控制点2 (p3,p4)]  
</mermaid>  

=== 自定义示例 ===  
<syntaxhighlight lang="css">  
/* 弹性效果 */  
.elastic {  
  animation-timing-function: cubic-bezier(0.68, -0.6, 0.32, 1.6);  
}  
</syntaxhighlight>  

== 阶跃函数：steps() ==  
对于离散动画（如精灵图帧切换），可使用<code>steps(n, start|end)</code>函数将动画分为n个等距步骤。  

{| class="wikitable"  
! 参数 !! 效果  
|-  
| <code>steps(4, start)</code> || 每步开始时跳跃  
|-  
| <code>steps(4, end)</code> || 每步结束时跳跃  
|}  

=== 打字机效果案例 ===  
<syntaxhighlight lang="css">  
@keyframes typing {  
  from { width: 0 }  
  to { width: 100% }  
}  
.typewriter {  
  animation: typing 3s steps(40, end) infinite;  
}  
</syntaxhighlight>  

== 性能优化建议 ==  
1. 避免使用复杂贝塞尔曲线（如控制点超出[0,1]范围），可能导致计算开销增加。  
2. 对移动设备优先使用<code>ease-out</code>或<code>linear</code>以减少重绘。  
3. 使用<code>will-change: transform</code>提示浏览器优化硬件加速。  

== 实际应用场景 ==  
* '''加载动画'''：<code>ease-out</code>实现平滑减速  
* '''菜单展开'''：<code>cubic-bezier(0.18, 0.89, 0.32, 1.28)</code>创造弹性效果  
* '''进度条'''：<code>linear</code>保持匀速前进  

== 扩展阅读 ==  
* [[w:贝塞尔曲线|维基百科：贝塞尔曲线数学原理]]  
* [https://developer.mozilla.org/en-US/docs/Web/CSS/easing-function MDN文档：缓动函数]  

{{CSS Animation Navigation}}

[[Category:编程语言]]
[[Category:CSS]]
[[Category:CSS动画]]