使用@keyframes定义动画关键帧并应用animation属性实现CSS动画效果，如slideIn滑入、pulse脉冲等，通过设置持续时间、缓动函数、延迟和填充模式等参数控制动画行为。
在 CSS 中，使用 @keyframes 可以为元素创建动画效果。它定义了动画过程中的关键帧，也就是动画在不同时间点的样式状态。
1. 定义 @keyframes 动画
使用 @keyframes 后跟一个动画名称，然后在花括号中设置各个关键帧（如 0%、50%、100% 或 from/to）对应的样式：
@keyframes slideIn { from { transform: translateX(-100%); } to { transform: translateX(0); }}
上面的例子定义了一个名为 slideIn 的动画：元素从左侧外（左移100%自身宽度）滑动到正常位置。
2. 将动画应用到元素
通过 animation 属性把定义好的动画绑定到某个元素上：
立即学习“前端免费学习笔记（深入）”；
.animated-box { width: 100px; height: 100px; background-color: blue; animation: slideIn 2s ease-in-out 0.5s forwards;}
这里 animation 的参数依次是：
新鲜水果网站销售模板
网站模板是能够具有交互性，能够包含更多活跃的元素，就有必要在网页中嵌入其它的技术。如：Javascript、VBScript、Document Object Model（DOM，文档对象模型）、Layers和 Cascading Style Sheets（CSS，层叠样式表），这里主要讲Javascript。那么Javascript是什么东西？Javascript就是适应动态网页制作的需要而诞生的
70 查看详情 
动画名称：对应 @keyframes 定义的名字持续时间：2秒完成动画缓动函数：ease-in-out 表示先慢后快再慢延迟时间：0.5秒后开始填充模式：forwards 表示动画结束后保持最后一帧的样式
3. 使用百分比设置多关键帧
你可以用百分比精确控制动画过程中的多个状态：
@keyframes pulse { 0% { opacity: 0.5; transform: scale(1); } 50% { opacity: 1; transform: scale(1.1); } 100% { opacity: 0.5; transform: scale(1); }}
这个脉冲动画会让元素先放大变不透明，再恢复原样，适合做提示效果。
4. 常用 animation 属性简写或单独设置
除了简写的 animation，也可以单独设置属性：
animation-duration：动画持续时间animation-timing-function：速度曲线animation-delay：延迟启动animation-iteration-count：播放次数（可设数字或 infinite）animation-direction：播放方向（如 reverse, alternate）animation-fill-mode：动画外时间的样式（如 backwards, both）animation-play-state：控制暂停（paused）或运行（running）
基本上就这些。只要定义好关键帧，再应用到元素上，就能实现流畅的 CSS 动画。注意浏览器兼容性，一般现代浏览器都支持，必要时可加 -webkit- 前缀。
以上就是在css中如何用@keyframes制作动画的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1031274.html
微信扫一扫 
支付宝扫一扫 
