最近一直苦恼做一个banner的进度条，原先用js改变width值，但明显卡顿。后来用了animation，超级好用。
<!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> </head> <style> .rotation { animation: rotation 8s linear; 50px; background:red; height:2px; } @keyframes rotation { 0% { transform: translateX(0) ; } 100% { transform: translateX(50px) ; } } </style> <body> <div class="rotation"> </div> </body> </html>