使用@keyframes定义动画需先命名并设置关键帧，如0%到100%或from/to，描述样式变化过程；再通过animation属性将动画绑定到元素，可设置持续时间、延迟、次数等，也可简写为animation复合属性，实现如滑入、淡入等效果，并注意添加-webkit-前缀以兼容旧版浏览器。
在CSS中使用@keyframes定义动画，主要是为了描述元素从一种样式状态过渡到另一种样式的过程。通过给动画命名并设置关键帧（如0%、50%、100%），可以精确控制动画每一阶段的样式表现。
定义@keyframes动画
使用@keyframes规则时，先为动画起一个名字，然后在花括号内设置各个关键帧的样式：
@keyframes slideIn { 0% { transform: translateX(-100%); opacity: 0; } 100% { transform: translateX(0); opacity: 1; }}
上面的例子定义了一个名为slideIn的动画：元素从左侧外移入，并由透明变为不透明。
将动画应用到元素
定义好动画后，需要使用animation属性或其子属性将其绑定到具体元素上：
立即学习“前端免费学习笔记（深入）”；
Waymark
Waymark是一个视频制作工具，帮助企业快速轻松地制作高影响力的广告。
79 查看详情 
.animated-box { width: 100px; height: 100px; background: blue; animation-name: slideIn; animation-duration: 2s; animation-timing-function: ease-out; animation-delay: 0.5s; animation-iteration-count: 1; animation-fill-mode: forwards;}
也可以简写为：
.animated-box { animation: slideIn 2s ease-out 0.5s 1 forwards;}
关键帧的其他写法
除了使用百分比，还可以用from和to表示起止点，适用于简单动画：
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; }}
这种写法等同于0%和100%的关键帧，更简洁直观。
基本上就这些。只要定义了@keyframes并正确应用到元素，就能实现丰富的CSS动画效果。注意浏览器兼容性时可考虑添加-webkit-前缀，尤其在移动端或旧版浏览器中。
以上就是在css中如何使用@keyframes定义动画的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1007921.html
微信扫一扫 
支付宝扫一扫 
