1、聲明：@keyframes name{ }； 2、涉及到的屬性 animation-name：動畫名稱 animation-duration：單次動畫總時長 animation-timing-function：時間函數 animation-delay：播放前延時的時長 animation-ite ...
1、聲明：@keyframes name{ }；
2、涉及到的屬性
animation-name：動畫名稱
animation-duration：單次動畫總時長
animation-timing-function：時間函數
animation-delay：播放前延時的時長
animation-iteration-count：播放次數 （特殊值：infinite 迴圈播放）
animation-direction：播放順序（normal：正常播放 alternate：輪流反向播放）
3、簡寫animation: name duration timing-function delay iteration-count direction fill-mode;
4、例子：
<style> @keyframes cart { from { left: 0; top: 0; border-radius: 0; } 20% { left: 200px; top: 500px; transform: rotateZ(720deg); } 40% { left: 400px; top: 0; border-radius: 50px; } 60% { top: 500px; left: 600px; border-radius: 50%; } 80% { top: 0px; left: 800px; border-radius: 50px; } to { left: 0; top: 0; } } .Z { height: 150px; width: 150px; position: relative; background-color: blue; animation: cart 10s linear 2s infinite alternate; transition: all 2s; } </style> </head> <body> <div class="Z"> </div>
得到的效果：
