动画的基本使用
动画效果无非就是两步
1.先定义动画
2.再使用动画
我们使用keyframes定义动画（类似定义类选择器）
@keyframes 动画名称{ 0%{ width: 100px; } 100%{ width: 200px; } }
然后我们要使用动画
div{ /* 调用动画 */ animation-name: 动画名称; /* 持续时间 */ animation-duration: 持续时间; }
举例
<!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>Document</title> <link rel="stylesheet" href="./1.css"> </head> <body> <div class="box"> </div> </body> </html>
* { margin: 0px; padding: 0px; } .box { width: 100px; height: 100px; background: red; position: relative; animation: myfirst 5s linear 0s infinite alternate ; } @keyframes myfirst { 0% { width: 100px; } 100% { width: 400px; } }
动画常用的属性
动画简写属性
animation: 动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 动画起始或者结束的状态：
animation: move 5s linear 2s infinite alternate forwards;
