深刻淺出篇 — animation & transition

一. animation

其動畫實現相似動畫書同樣，須要設置關鍵幀,執行每一幀的不一樣狀態就構成了動畫
複製代碼

1. 關鍵幀： @keyframs 關鍵幀名稱 { 設置的幀 }

例：

@keyframes move{
        0%{
            /* 縮小 */
            transform: scale(0.5);
            border-radius: 100%;
        }
        50%{
            background: rgb(220, 160, 49);
        }
        100%{
            background: yellow;
            transform: scale(1.5);
            border-radius: 0%;
        }
}
複製代碼

2. 經過animation來啓用關鍵幀

例：

animation:move 2s
整體來講一個動畫效果就是這麼啓用的，接下來介紹一下animation的其餘屬性
複製代碼

3. animation的屬性

• animation-name : move (關鍵幀的名稱,此處能夠自定義)
• ----分割線----
• animation-duration : 1s (設置這個動畫總共多長時間完成)
• ----分割線----
• animation-timing-function : linear (運動狀態，此處爲勻速)
• ----分割線----
• animation-delay : 2s (設置何時開始執行動畫的時間)
• ----分割線----
• animation-iteration-count : infinite (永不間斷的執行動畫)
• animation-iteration-count: 3 (執行幾回關鍵幀)
• ----分割線----
• animation-direction : alternate(從頭至尾執行動畫/往復運動)
• animation-direction : reverse (反向執行關鍵幀動畫)
• ----分割線----
• animation-fill-mode : backwards (當即做用第一個關鍵幀動畫效果)
• animation-fill-mode : forwards (運動結束後，關鍵幀中止在最後一幀的位置)
• animation-fill-mode : both (開始在第一個關鍵幀的位置,結束在最後一個關鍵幀的位置)

例：

.demo{
        width: 250px;
        height: 250px;
        background: red;
        margin: 100px auto;
        animation: stretch 2s infinite alternate linear;
    }
注：複合屬性位置可顛倒  但動畫執行時間在前  間隔時間在後
複製代碼

4. animation的兼容寫法

• 例：@-wekbit-keyframes

二. transition 過渡動畫

題外話：transform  transition translate 的不一樣
1. transform 和 transition 是css3中的屬性，而看似類似的translate爲transform中的一個值
2. transform 變形 靜態的
3. transition 動畫效果
複製代碼

1. transition-propetry : width/height/all/... ( 用於監聽哪一個屬性改變的值)

例：

transition: left 2s  1s ease-in ;   （當一個元素的 left 值發生變化時，這個效果就會被啓用）
複製代碼

2. transiton-delay : 0 （動畫延時時間）
3. transition-duration : 2s (該動畫總共執行的時間)
4. transition-timing-function : linear; (指定過渡動畫的運動狀態，這裏是勻速)

小知識點：

transition-timing-function的不一樣值的含義
1. ease-in 慢到快
2. ease-out 快到慢
3. ease-in-out 慢快慢
4. cubic-bezier(x,y,x,y) 貝塞爾曲線
複製代碼

三. 隨心記

1. animation : run 4s, foo 3s ; (兩個會並行運動；並非一個先運動，一個後運動)
2. animation的關鍵幀中( 0% === from ,100% === to )