CSS 小结笔记之变形、过渡与动画的示例
时间：2024/2/10作者：未知来源：争怎路由网人气：
- paused 暂停
（2）、@keyframes 自定义动画
格式如下
@keyframes 动画名称 { from{ 开始} 0% to{ 结束 } 100% }可以用 from...to 来指定动画过程，也可以用0%~100%指定动画过程。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> p { width: 100px; height: 100px; background-color: aqua; /* animation: 动画名称 动画时间 运动曲线 何时开始 播放次数 是否反方向 */ animation: move 5s linear 3; } @keyframes move { 0% { transform: translate3d(0, 0, 0); } 25% { transform: translate3d(400px, 0, 0); } 50% { transform: translate3d(400px, 300px, 0); } 75% { transform: translate3d(0, 300px, 0); } 100% { transform: translate3d(0, 0, 0); } } </style> </head> <body> <p></p> </body> </html>
总结：以上就是本篇文的全部内容，希望能对大家的学习有所帮助。更多相关教程请访问 CSS视频教程，CSS3视频教程！
相关推荐：
以上就是CSS 小结笔记之变形、过渡与动画的示例的详细内容，更多请关注php中文网其它相关文章！
网站建设是一个广义的术语，涵盖了许多不同的技能和学科中所使用的生产和维护的网站。
关键词：CSS 小结笔记之变形、过渡与动画的示例