参考：CSS动画简介——阮一峰
1 animate介绍
1. @keyframes 自定义动画名称 { from {} to {} } 2. 通过动画名称调用动画集 animation-name： 动画集名称。 3. 属性介绍： /* 1. 通过动画集名称调用动画 */ animation-name: box_move; /* 2.设置动画执行时间 */ animation-duration: 1s; /* 3. 动画默认执行次数是1次, infinite: 无限次 */ animation-iteration-count: infinite; /* 4. 设置动画的速度类型: ease ; */ animation-timing-function: linear; /* 5. 设置延时执行时间 */ animation-delay: 2s; /* 6. 设置动画逆播【动画怎么正着播放，倒着播放的时候也是一样的效果】 normal*/ animation-direction: alternate; /* 7. 设置动画执行完后的一个状态: 让动画停在结束时候的状态 */ animation-fill-mode: forwards; /* 8。 动画播放状态设置： running | paused暂停 */ animation-play-state: paused; 4. animation复合写法： 例如： animation: box_move 1s linear 2s alternate forwards; 注意： 1. 一个元素可以同时调用多个动画集，使用逗号隔开。 例如： animation: box_move 1s, one 1s linear 1s, three 2s ease 5s alternate; 2. 可以将一个完整的动画分割成若干个阶段执行 @keyframes one { 0% {} 10% {} 20% {} ... 100%{} } 百分比是相对整个动画执行时间而设置的。
2 盒子移动案例
案例效果：
1. 盒子先水平向右移动100px；接下来向下移动100px，
2. 然后向左移动100px，最后向上移动100px又回到原点，
3. 其中每次改变方向都要变化背景颜色，循环往复执行
代码实现：
<!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> .box { width: 30px; height: 30px; background-color: blue; animation: move 8s linear infinite forwards; } @keyframes move { from { } 25% { transform: translateX(100px); background-color: red; } 50% { transform: translateX(100px) translateY(100px); background-color: green; } 75% { transform: translateX(0px) translateY(100px); background-color: yellow; } to { transform: translateY(0px); background-color: blue; } } </style> </head> <body> <div class="box"></div> </body> </html>
3 抛物线案例
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8" /> <title>Document</title> <style> body { position: relative; } .animation { position: absolute; width: 50px; height: 50px; border-radius: 25px; background-color: #ed3; animation: r 1.5s linear 0s infinite forwards, l 1.5s cubic-bezier(0, 0, 1, 0) 0s infinite forwards; } @keyframes r { from { left: 0; } to { left: 120px; } } @keyframes l { from { top: 0; } to { top: 340px; } } </style> </head> <body> <div class="animation"></div> </body> </html>