如何通过css animation-name与animation-duration制作动画

首先定义关键帧动画并命名，再通过animation-name和animation-duration设置名称与时长，即可实现CSS动画。1. 使用@keyframes定义动画名称如slideIn；2. 用animation-duration设定播放时长如1s；3. 将两者应用于元素；4. 可简写为animation: slideIn 1s。需注意拼写、定义完整及浏览器兼容性。

通过 animation-name 与 animation-duration 制作动画，是 CSS 动画的基础。你需要先定义一个关键帧动画，再将其应用到元素上，并设置播放时长。

1. 使用 animation-name 指定动画名称

animation-name 用于指定 @keyframes 定义的动画名称。只有先命名动画，才能在元素上使用它。

例如：

@keyframes slideIn {   from {     transform: translateX(-100%);   }   to {     transform: translateX(0);   } }

这里定义了一个名为 slideIn 的动画，表示元素从左侧滑入。

2. 使用 animation-duration 设置动画时长

animation-duration 决定动画完成一次所需的时间，单位可以是秒（s）或毫秒（ms）。

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

常见用法：

• 0.5s：半秒完成动画
• 2s：两秒完成动画
• 默认值为 0，即没有动画效果

3. 将两者结合使用

把 animation-name 和 animation-duration 同时应用到元素上，就能看到动画效果。

百度文心百中

百度大模型语义搜索体验中心

32

查看详情

.animated-box {   width: 100px;   height: 100px;   background: blue;   animation-name: slideIn;   animation-duration: 1s; }

这样，class 为 animated-box 的元素就会在 1 秒内从左边滑入可视区域。

4. 简写形式更高效

你可以使用简写的 animation 属性同时设置多个参数：

.animated-box {   animation: slideIn 1s; }

这行代码等同于分别写 animation-name 和 animation-duration。

基本上就这些。只要定义好关键帧，再指定名称和时长，就能让元素动起来。不复杂但容易忽略细节，比如拼写错误或忘记写 @keyframes。确保浏览器支持并测试效果即可。

以上就是如何通过css 浏览器 css动画 css class animation