css3初體驗之animation簡單動畫例子【來回滑動的小球】
阿新 • • 發佈：2019-01-05
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> div{width: 200px;height: 200px;border: 1px dashed green;} div span{ display:inline-block; width: 30px; height: 30px; border-radius: 100%; background-color: red; animation-name: around; animation-duration: 10s; animation-timing-function: ease-in-out; animation-delay: 1s; animation-iteration-count: infinite; } @keyframes around{ 0%{ transform: translateX(0); } 25%{ transform: translateX(180px); } 50%{ transform: translate(180px,180px); } 75%{ transform: translate(0,180px); } 100%{ transform: translateY(0); } } </style> </head> <body> <div> <span></span> </div> </body> </html>
