@keyframes
規則用於建立動畫。它的三個必要的值如下
animationname：定義動畫的名稱；
keyframes-selector：必需。動畫時長的百分比；
css-styles：乙個或多個合法的 css 樣式屬性；
animation-name 規定需要繫結到選擇器的 keyframe 名稱。
animation
animation-duration:規定完成動畫所花費的時間，以秒或毫秒計。
animation-timing-function:規定動畫的速度曲線。
animation-delay:規定在動畫開始之前的延遲。
animation-play-state 規定動畫是否正在執行或暫停。預設是 "running"。
animation-fill-mode 規定物件動畫時間之外的狀態。
animation-timing-function
linear 動畫從頭到尾的速度是相同的。
ease 預設。動畫以低速開始，然後加快，在結束前變慢。
ease-in 動畫以低速開始。
ease-out 動畫以低速結束。
ease-in-out 動畫以低速開始和結束。
cubic-bezier(n,n,n,n) 在 cubic-bezier 函式中自己的值。可能的值是從 0 到 1 的數值。
animation-iteration-count
animation-direction
animation-play-state
paused 規定動畫已暫停。
animation-fill-mode
none 不改變預設行為。
forwards 當動畫完成後，保持最後乙個屬性值.
backwards 在 animation-delay 所指定的一段時間內，在動畫顯示之前，應用開始屬性值.
both 向前和向後填充模式都被應用。
css動畫 幀動畫
動畫 animation 設定關鍵幀 從左上，到右上，到右下的動畫 上面是系統性動畫屬性，下面拆分 animation 綜合性的動畫設定屬性 animation name 動畫名稱 animation duration 動畫的時間週期 animation timing function 動畫變化的速...
transition標籤 vue動畫
一 使用transition標籤包裹，v enter 是進入之前，元素的起始狀態 v le e to 離開之後動畫的終止狀態 v enter,v le e to 入場 離場 動畫的時間段 v enter active,v le e active 帶有名字的transition mytransitio...
譯 CSS動畫 vs JS動畫
目前有兩個主流的方法在web上建立動畫 使用css或js。到底選擇哪種方法來實現動畫，完全取決於你的專案以及你想要達到的效果。tips 很多基礎的動畫都可以通過css或js來實現，但兩者的效果和時間會有差別。兩種方式各有千秋 如果你已經用了類似jquery的包含動畫函式的js框架，你會發現用它來控制...