CSS3動畫總結學習(一)

• 參考文章:
• CSS3 Transitions, Transforms和Animation使用簡介與應用展現
• CSS 參考手冊

動畫的分類

平移動畫

• transform: 就是變換, 變換, 變換
• 也就是能看到的, 直接的更改. 暴力的那種.

.dv {
    transform: translate(10px, 10px); /* 位置 */
    transform: scale(1, 0.5); /* 縮放 */
    transform: rotate(20deg); /* 旋轉 */
  }

• translate:
  • 座標變換.
  • 能夠接受兩個參數, 表示X軸和Y軸上的變化
  • 也能夠只使用某個位置, 例如transform: transalteX(10px);
  • 能夠開啓三個軸上的同時變化: 例如transform: translate3d(10px, 20px, 10px);
• rotate:
  • 元素旋轉
  • 能夠接受一個參數, 表示須要旋轉的角度
  • 也能夠只在某個位置上進行旋轉, 例如: transform: rotateX(35deg);
  • 也能夠在3d方面的旋轉變化, 例如: transform: rotate3d(1, 1, 2, 45deg)
  • 關於每一個屬性的具體原理, 後面具體分析
• scale:
  • 縮放
  • 能夠接受一個參數, 表示縮放表示水平和垂直同時縮放的倍數.
  • 就收兩個參數, 第一個參數表示在水平方向的縮放, 第二個參數表示在垂直方向的縮放
  • 一樣可使用scale3d()來表示在三維層面的縮放
• skew:
  • 傾斜
  • 表示在X軸上的傾斜角度
  • 第二個參數表示在Y軸上的傾斜角度
• marix:
  • 矩陣
  • 這是一個超屌的屬性.豈是這一句兩句能扯清楚的
  • 放一篇大神博客, 之後再來慢慢琢磨: 理解CSS3 transform中的Matrix(矩陣)

過渡動畫

• transition: 過渡.
• 這是下面四個屬性的簡寫.
• 就是一個屬性的數值, 慢慢的, 平滑的向另外一個數值進行改變

• transition-property
  • 須要設置過分的屬性
  • 也就是當這個屬性變化的, 是慢慢的變化.
  • 值是none, 沒有過渡屬性.
  • 默認是all, 全部屬性採用過渡的方式變化.
  • 當給定過渡時間後, 不須要列出過渡屬性, 全部屬性默認使用過渡效果.
• transition-duration
  • 期間, 就是時間, 就是一個這個屬性上的值, 變成另外一個值的時候, 須要的時間.
  • 其值能夠是毫秒ms, 也能夠是秒s
    • 有個好玩的地方, 動畫默認的是先慢後快.
    • 若是咱們設置了hover屬性五秒完成, 三秒後移開, 這個時候, 會先慢慢的過去, 而後最快的速度回來.
    • 個人理解是, 當一個屬性值變化的時候, 會有一個函數計算, 還差多少, 完成多少的時候, 是什麼速度.
  • 默認是0, 不會有過渡.
• transition-timing-function
  • 動畫變化的方式, 快慢的區別
  • 容許隨着時間來改變速度.
  • 默認的方式是: ease: 先慢後快. ease: 單詞翻譯: 緩解, 減輕, 緩慢的落下.
  • linear: 線性過渡
  • ease-in: in, 去裏面, 進去的時候,慢一點.
  • ease-out: out, 外邊, 走到最後外邊的時候, 慢下來.
  • ease-in-out: 先快再慢再快.
  • cubic-bezier(): 很牛逼了.
• transition-delay
  • 在動畫開始前, 須要等待的時間.
  • 用秒s和毫秒ms計算.

自定義動畫(幀動畫)

• animation: 動畫, 就是動畫. 就是c3的動畫
• 動畫, 還能指什麼呢, 各個屬性的改變之類的.
• 是個總稱: animation: name duration timing-function delay iteration-count direction

.dv:hover {
    animation-name: myAnimaiton;
    animation-duration: 3s;
  }
  @keyframes myAnimaiton {
    0% {
      padding: 0;
    }
    100% {
      padding: 150px;
    }
  }

• animation-name
  • 須要綁定的keyframe的名稱
  • 默認值: none. 無動畫效果.
  • 後面給一個@keyframes <animation-name> {// 描述動畫}
  • 就能夠完成動畫過程的描述了
• animation-duration
  • 動畫執行的時間
  • 默認是0, 無動畫執行
  • 單位是秒s或者毫秒ms
• animation-timing-function
  • 動畫執行的速度
  • 具體的參考下transition-timing-funciton
• animation-delay
  • 延遲時間.
  • 多久後, 開始執行動畫
• animation-iteration-count
  • 動畫循環執行的次數
  • 能夠是具體的數字.
  • infinite: 無限次.
  • 留個疑問: 當鼠標hover的時候, 執行的動畫, 爲何鼠標移動的時候, 沒有離開元素, 可是元素縮小後, 離開了. 動畫沒有中止.
• animation-direction
  • 動畫的方向
  • normal: 正常方向, 該怎麼動, 怎麼動.
  • reverse: 反方向, 從100%-0%的執行
  • alternate: 交替執行, 從正常方向開始
  • alternate-reverse: 交替執行, 從反方向開始