如何通过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 同时应用到元素上，就能看到动画效果。

卡拉OK视频制作

卡拉OK视频制作，在几分钟内制作出你的卡拉OK视频

178

查看详情

.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 animation-name与animation-duration制作动画的详细内容，更多请关注php中文网其它相关文章！