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 > </div>
得到的效果：
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/121959.html
標籤：Html/Css
上一篇：Node.js 概述