首页 > 文章 > 前端

CSS动画基础：animation-name与duration详解

时间：2025-11-28 09:12:29 375浏览收藏

本篇文章向大家介绍《CSS动画基础：animation-name与duration解析》，主要包括，具有一定的参考价值，需要的朋友可以参考一下。

animation由name、duration和timing-function组成，分别定义动画名称、持续时间和速度曲线。例如，@keyframes slideIn配合animation-name: slideIn使元素滑入，animation-duration: 1.5s设定时长1.5秒，animation-timing-function: ease-out实现先快后慢效果，三者结合可创建流畅基础动画。

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

在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 搭配好，就能做出基础但有效的动画效果。它们是构建更复杂动画的基础组件，理解清楚对后续学习很有帮助。

理论要掌握，实操不能落！以上关于《CSS动画基础：animation-name与duration详解》的详细介绍，大家都掌握了吧！如果想要继续提升自己的能力，那么就来关注golang学习网公众号吧！