css animation-name与animation-duration解析-css教程-PHP中文网

css animation-name与animation-duration解析

P粉602998670

发布： 2025-10-03 17:01:02

原创

465人浏览过

animation-name指定@keyframes定义的动画名称，确保与关键帧名称一致；animation-duration设置动画持续时间，单位为秒或毫秒，两者需同时使用才能生效。

css animation-name与animation-duration解析

CSS 中 animation-name 和 animation-duration 是动画（@keyframes）的两个核心属性，它们共同定义了一个动画的基本行为。下面分别解析这两个属性的作用与用法。

animation-name 用于指定由 @keyframes 定义的动画名称。浏览器根据这个名称找到对应的动画关键帧规则。

常见要点：

示例：

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.element {
  animation-name: fadeIn;
}

登录后复制

animation-duration 决定动画完成一个周期所需的时间，单位通常使用秒（s）或毫秒（ms）。

CSS3 Animation文字动画特效

CSS3 Animation文字动画特效里面包含7款不同效果的文字动画特效。

119

关键细节：

示例：

.element {
  animation-name: slideRight;
  animation-duration: 1.5s;
}

登录后复制

这两个属性通常一起使用，缺一不可。只有指定了名称和时长，浏览器才能正确播放动画。

基本上就这些，理解清楚命名对应关系和时间单位，就能顺利控制动画播放。

以上就是css animation-name与animation-duration解析的详细内容，更多请关注php中文网其它相关文章！

大家都在看：