CSS动画属性animation基础_animation-name duration timing-function解析

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 规则相对应。浏览器会根据该名称找到对应的动画帧定义，并应用到元素上。

例如：

这里 slideIn 就是 animation-name 的值。如果名称拼写错误或未定义对应的 @keyframes，则动画不会生效。

立即学习“前端免费学习笔记（深入）”；

animation-duration：控制动画持续时间

animation-duration 决定了动画完成一次全过程所需的时间，单位通常是秒（s）或毫秒（ms）。

常见用法：

• animation-duration: 2s; —— 动画持续2秒
• animation-duration: 500ms; —— 半秒完成动画

若不设置 duration，默认值为 0，意味着动画瞬间完成，肉眼看不到变化。

ClipDrop

Stability.AI出品的图片处理系列工具（背景移除、图片放大、打光）

112

查看详情

结合前面的例子：

这样元素就会在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)

举例说明：

这个设置会让元素滑入时初速度较快，接近终点时缓慢停下，带来更自然的视觉感受。

基本上就这些。把 animation-name、duration 和 timing-function 搭配好，就能做出基础但有效的动画效果。它们是构建更复杂动画的基础组件，理解清楚对后续学习很有帮助。

以上就是CSS动画属性animation基础_animation-name duration timing-function解析的详细内容，更多请关注php中文网其它相关文章！