css 动画
1. html 结构
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Keyframes</title> <style> body { background: #333; } .box { background: #fff; width: 200px; height: 200px; position: relative; animation-name: anim; animation-duration: 1s; /* 动画执行次数 */ animation-iteration-count: infinite; /* 这个动画是在动画播放完之后的效果是否可见 forwards保持最后一个效果 */ animation-fill-mode: forwards; /* 动画延迟时间 */ /* animation-delay: 2s; */ /* 改变播放顺序,奇数此正向播放,偶数次反向播放 */ animation-direction: alternate-reverse; /* 控制动画播放曲线 */ animation-timing-function: ease-in-out; /* animation: anim 2s infinite forwards alternate-reverse ease-in-out; */ } @keyframes anim { from { width: 200px; top: 0; } to { width: 600px; background-color: aqua; top: 300px; } } </style> </head> <body> <div class="box"></div> </body> </html>
2. css 样式
body { background: #333; } .box { background: #fff; width: 200px; height: 200px; position: relative; animation-name: anim; animation-duration: 1s; /* 动画执行次数 */ animation-iteration-count: infinite; /* 这个动画是在动画播放完之后的效果是否可见 forwards保持最后一个效果 */ animation-fill-mode: forwards; /* 动画延迟时间 */ /* animation-delay: 2s; */ /* 改变播放顺序,奇数此正向播放,偶数次反向播放 */ animation-direction: alternate-reverse; /* 控制动画播放曲线 */ animation-timing-function: ease-in-out; /* animation: anim 2s infinite forwards alternate-reverse ease-in-out; */ } @keyframes anim { from { width: 200px; top: 0; } to { width: 600px; background-color: aqua; top: 300px; } }
3. 重点
混合属性
animation: anim 2s infinite forwards alternate-reverse ease-in-out;
animation: 名字 时间 执行次数 改变播放顺序 控制动画播放曲线