CSS3 循环动画 前端 450 fly 2021-01-12 17:55:29 CSS3 循环动画 ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> * { margin: 0; padding: 0; } .box { width: 200px; height: 200px; position: relative; margin: 150px auto; /* perspective: 1000px; */ /* 将平面图形转换为立体图形 */ /*transform-style: preserve-3d;*/ /* transform: rotateY(20deg) rotateX(150deg); */ /* 动画名称 动画时长 延时时间 匀速 无限循环 逆播 */ animation: changes 2s 0.2s linear infinite alternate; } .box:hover { animation-play-state: paused;/*鼠标放上去 暂停动画 */ } /*动画集名称*/ @keyframes changes { from { transform: translateX(0) } to { transform: translateX(300px) } } </style> </head> <body> <div class="box"> </div> </body> </html> ```