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、案例
案例效果:盒子先水平向右移动300px;接下来向下移动300px,然后向左移动300px,最后向上移动300px又回到原点,其中每次改变方向都要变化背景颜色,循环往复执行。
代码实现:
<!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 { /* margin: 100px auto; */ width: 100px; height: 100px; background-color: blue; animation: move 8s linear infinite forwards; } @keyframes move { from {} 25% { transform: translateX(300px); background-color: red; } 50% { transform: translateX(300px) translateY(300px); background-color: green; } 75% { transform: translateX(0px) translateY(300px); background-color: yellow; } to { transform: translateY(0px); background-color: blue; } } </style> </head> <body> <div class="box"> </div> </body> </html>