animation由name、duration和timing-function组成，分别定义动画名称、持续时间和速度曲线。例如，@keyframes slideIn配合animation-name: slideIn使元素滑入，animation-duration: 1.5s设定时长1.5秒，animation-timing-function: ease-out实现先快后慢效果，三者结合可创建流畅基础动画。
在CSS中，animation 属性是实现元素动态效果的核心工具之一。它能让页面元素随时间自动变化样式，从而创建出流畅的视觉动画。要掌握 animation，首先要理解它的基础组成部分：animation-name、duration 和 timing-function。
animation-name：指定动画的关键帧名称
animation-name 用于定义动画的名称，这个名称必须与一个 @keyframes 规则相对应。浏览器会根据该名称找到对应的动画帧定义，并应用到元素上。
例如：
@keyframes slideIn {from { transform: translateX(-100%); }
to { transform: translateX(0); }
}
.element {
animation-name: slideIn;
}
这里 slideIn 就是 animation-name 的值。如果名称拼写错误或未定义对应的 @keyframes，则动画不会生效。
立即学习“前端免费学习笔记（深入）”；
animation-duration：控制动画持续时间
animation-duration 决定了动画完成一次全过程所需的时间，单位通常是秒（s）或毫秒（ms）。
常见用法：
- animation-duration: 2s; —— 动画持续2秒
- animation-duration: 500ms; —— 半秒完成动画
若不设置 duration，默认值为 0，意味着动画瞬间完成，肉眼看不到变化。
结合前面的例子：
.element {animation-name: slideIn;
animation-duration: 1.5s;
}
这样元素就会在1.5秒内从左侧滑入可视区域。
animation-timing-function：调节动画速度曲线
animation-timing-function 控制动画在执行过程中的加速或减速节奏，也就是“缓动效果”。它决定了动画每一帧播放的快慢分布。
常用预设值包括：
- ease —— 开始慢，中间快，结束慢（默认值）
- linear —— 匀速运动，每帧速度一致
- ease-in —— 开始慢，逐渐加快
- ease-out —— 开始快，结束前变慢
- ease-in-out —— 两端慢，中间快
- cubic-bezier(n,n,n,n) —— 自定义贝塞尔曲线，如 cubic-bezier(0.68, -0.55, 0.27, 1.55)
举例说明：
.element {animation-name: slideIn;
animation-duration: 1s;
animation-timing-function: ease-out;
}
这个设置会让元素滑入时初速度较快，接近终点时缓慢停下，带来更自然的视觉感受。
基本上就这些。把 animation-name、duration 和 timing-function 搭配好，就能做出基础但有效的动画效果。它们是构建更复杂动画的基础组件，理解清楚对后续学习很有帮助。
