08CSS3动画.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> div { width: 120px; height: 120px; background-color: pink; /* 动画名称 动画时间 运动曲线 何时开始 播放次数 是否反方向*/ animation: run 4s ease 0s infinite alternate; } /*定义动画*/ @keyframes run { from { transform: translateX(0); } to { transform: translateX(500px); } } </style> </head> <body> <div></div> </body> </html>
09多组动画.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> div { width: 120px; height: 120px; background-color: pink; /* 动画名称 动画时间 运动曲线 何时开始 播放次数 是否反方向*/ animation: run 4s ease 0s infinite; } /*定义动画*/ @keyframes run { 0% { transform: translate3d(0,0,0); } 25% { transform: translate3d(600px,0,0); } 50% { transform: translate3d(600px,400px,0); } 75% { transform: translate3d(0,400px,0); } 100% { transform: translate3d(0,0,0); } } </style> </head> <body> <div></div> </body> </html>