來自這裏。
/* @keyframes duration | easing-function | delay |
iteration-count | direction | fill-mode | play-state | name */
animation: 3s ease-in 1s 2 reverse both paused slidein;
/* @keyframes duration | easing-function | delay | name */
animation: 3s linear 1s slidein;
/* two animations */
animation: 3s linear slidein, 3s ease-out 5s slideout;
一般我們使用的是第二個，還要配合@keyframes，如：
@keyframes addtrp {
from {background-color: #7c7;}
to {background-color: transparent;}
}
如果需要在動畫結束時執行某事件，可用js的animateend()方法，如：
document.addEventListener("animationend", function (e) {
if (e.target.classList.contains("addani")) {
e.target.classList.remove("addani");
if (!document.getElementsByClassName("addani").length) {
transing = false;
ejSaveHTML();
}
}
});
另外也可以使用transition來實現動畫，transition是當狀態發生改變時使用，具體可參見這裏。
/* Apply to 1 property */
/* property name | duration */
transition: margin-right 4s;
/* property name | duration | delay */
transition: margin-right 4s 1s;
/* property name | duration | easing function */
transition: margin-right 4s ease-in-out;
/* property name | duration | easing function | delay */
transition: margin-right 4s ease-in-out 1s;
/* Apply to 2 properties */
transition: margin-right 4s, color 1s;
/* Apply to all changed properties */
transition: all 0.5s ease-out;transition不需要keyframes，當然也無法任意控制動畫，只是一種狀態到另一種狀態的中間過渡。
同樣的，js也有一個transitionend()方法，能捕捉每一個transition的結束。用法與上面的animationend()相同。
技术文，不明觉历。