手寫CSS3動畫的幾種流派

sherlock221b發表於2017-12-05
CSSS3動畫

手寫CSS3動畫的幾種流派

陽春三月,人好,物好,心情好. 差不多也是get新技能的時期. 作為一名能力者,我們將目標鎖定到了css3 animation中. 眾所周知, 自從css3 加入了 3d硬體加速 就變的叼的一b 動畫執行執行緒單獨獨立執行,使得我們觸碰到了GPU這個神奇的東西, 效能一下子提高八度. 眾多場景應用 微應用 營銷活動 充斥在我們的朋友圈中. css3動畫雖然 上手簡單 隨便都能搞一發 , 但是想要得心應手 運用自如還是需要 一定的深度的, 下拉我們來看下 我們需要 掌握 css3動畫 中的那些能力.

序列動畫

栗子 ： 我們有一個盒子,我希望它能夠平移一段距離,然後旋轉,縮放,漸隱掉.

1.逗號流(comma)


-webkit-animation :
      slideRight 1s ease 0s both,
      rotate360 1s linear  0.8s forwards,
      lessen 1s ease  1.8s forwards,
      fadeOut 1s ease  2.8s forwards;

藉助animation 逗號分隔的特性來實現.這種寫法非常獨特的優勢在與

  • 程式碼可讀性強
  • 定義好的keyframes動畫可以被複用,
  • 保你分分鐘內搞定一串動畫

理想很美好,現實卻是殘酷的,執行上面的程式碼,我們發現動畫並不是我們想象中的那樣,只有slideRight能正常執行完成.

問題:

  • slideRight 使用的是 -webkit-transform : translate(200px);
  • rotate360 使用的是 -webkit-transform : rotate(360deg);
  • lessen使用的是 -webkit-transform : scale(0.5);

當後一個動畫的執行的時候 會覆蓋掉前一個動畫的transform. 我們後一個動畫執行的時候 需要帶上前一個動畫的結束幀transform

如下解:

@include keyframes (rotate360){
  0%{
    -webkit-transform : translate(200px) rotate(0deg);
  }

  100%{
    -webkit-transform : translate(200px) rotate(360deg);
  }

2.標籤流(label)

此法是為了解上述描述的弊端, 通過巢狀標籤來實現動畫

HTML

CSS

.translate {
  -webkit-animation: slideRight 1s ease 0s both;
  -ms-animation: slideRight 1s ease 0s both;
  -moz-animation: slideRight 1s ease 0s both;
  -o-animation: slideRight 1s ease 0s both;
  animation: slideRight 1s ease 0s both; }

.rotate {
  -webkit-animation: rotate360 1s linear 0.8s both;
  -ms-animation: rotate360 1s linear 0.8s both;
  -moz-animation: rotate360 1s linear 0.8s both;
  -o-animation: rotate360 1s linear 0.8s both;
  animation: rotate360 1s linear 0.8s both; }

.lessen {
  -webkit-animation: lessen 1s ease 1.8s both;
  -ms-animation: lessen 1s ease 1.8s both;
  -moz-animation: lessen 1s ease 1.8s both;
  -o-animation: lessen 1s ease 1.8s both;
  animation: lessen 1s ease 1.8s both; }

.fadeOut {
  -webkit-animation: fadeOut 1s ease 2.8s both;
  -ms-animation: fadeOut 1s ease 2.8s both;
  -moz-animation: fadeOut 1s ease 2.8s both;
  -o-animation: fadeOut 1s ease 2.8s both;
  animation: fadeOut 1s ease 2.8s both; }

keyframes

這裡為了便於顯示貼了sass的程式碼

@include keyframes(lessen){
  0%{
    -webkit-transform : scale(1);
  }

  100%{
    -webkit-transform : scale(0.5);
  }
}

@include keyframes(fadeOut){
  0%{
    opacity: 1;
  }

  100%{
    opacity: 0;
  }
}


@include keyframes (rotate360){
  0%{
    -webkit-transform : rotate(0deg);
  }

  100%{
    -webkit-transform : rotate(360deg);
  }
}


@include keyframes (slideRight){

  0%{
    -webkit-transform : translate(0);
  }

  100%{
    -webkit-transform : translate(200px);
  }
}

動畫執行的順序是按照 標籤的順序來定的. 從translate 到 rotate 到 lessen 到 fadeOut. 比較完美, 但要注意動畫的執行順序和標籤結構順序要一致 !important

  • 好處不用說,動畫可複用.
  • 結構清晰
  • 複雜動畫導致dom結構過深

####PS : 使用標籤流製作的時候 如果元素絕對定位的屬性 請放在最外層標籤上面

>標籤流的適用場景 適合簡單輕快的動畫

3.keyframes流

複雜型動畫 這類動畫基本不需要複用

@-webkit-keyframes kfc-ani {
  0% {
    -webkit-transform: translate(0px) rotate(0deg) scale(1);
    transform: translate(0px) rotate(0deg) scale(1);
    -moz-transform: translate(0px) rotate(0deg) scale(1);
    -ms-transform: translate(0px) rotate(0deg) scale(1); }
  33.33333% {
    -webkit-transform: translate(200px) rotate(0deg) scale(1);
    transform: translate(200px) rotate(0deg) scale(1);
    -moz-transform: translate(200px) rotate(0deg) scale(1);
    -ms-transform: translate(200px) rotate(0deg) scale(1); }
  66.66667% {
    -webkit-transform: translate(200px) rotate(360deg) scale(1);
    transform: translate(200px) rotate(360deg) scale(1);
    -moz-transform: translate(200px) rotate(360deg) scale(1);
    -ms-transform: translate(200px) rotate(360deg) scale(1); }
  100.0% {
    -webkit-transform: translate(200px) rotate(360deg) scale(0.5);
    transform: translate(200px) rotate(360deg) scale(0.5);
    -moz-transform: translate(200px) rotate(360deg) scale(0.5);
    -ms-transform: translate(200px) rotate(360deg) scale(0.5); }
}

這程式碼是否夠酸爽,以上都是由css預處理工具生成. 藉助sass我們可以盡情的去使用這張王牌.

sass來執行

$keys :
(name : transform,value : translate(0px) rotate(0deg)  scale(1),dur : 0s),
(name : transform,value : translate(200px) rotate(0deg)  scale(1),dur : 1s),
(name : transform,value : translate(200px) rotate(360deg) scale(1),dur : 1s),
(name : transform,value : translate(200px) rotate(360deg) scale(0.5),dur : 1s);

.kfc-ani{
  -webkit-animation : kfc-ani 4s ease 0s both;
}

@include kfc($keys,kfc-ani);

keyframes 流非常適合複雜的動畫,它不具備 複用型,寫法也夠粗暴

  • 複雜動畫王牌
  • 終極手段
  • 複用差 一次性frames

複雜動畫的王牌

3種流派 各有所長,我們在實際專案中需要靈活運用;

  1. 使用標籤流完成 可複用的動畫
  2. 製作單一複雜動畫的時候,請選擇王牌keyframes
  3. 適當使用逗號流也有奇效

實際專案案例

手寫CSS3動畫的幾種流派

知了是一款k12的輕社交產品 http://imzhiliao.com

原始碼git

https://github.com/sherlock221/AnimationMultiple

相關文章