首先定义关键帧动画并命名，再通过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 同时应用到元素上，就能看到动画效果。
音疯
音疯是昆仑万维推出的一个AI音乐创作平台，每日可以免费生成6首歌曲。
146 查看详情
.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制作动画的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1056523.html
微信扫一扫 
支付宝扫一扫 
