手寫CSS3動畫的幾種流派

陽春三月,人好,物好,心情好. 差很少也是get新技能的時期. 做爲一名能力者,咱們將目標鎖定到了css3 animation中. 衆所周知, 自從css3 加入了 3d硬件加速 就變的叼的一b 動畫執行線程單獨獨立執行,使得咱們觸碰到了GPU這個神奇的東西, 性能一會兒提升八度. 衆多場景應用 微應用 營銷活動 充斥在咱們的朋友圈中. css3動畫雖然 上手簡單 隨便都能搞一發 , 可是想要駕輕就熟 運用自如仍是須要 必定的深度的, 下拉咱們來看下 咱們須要 掌握 css3動畫 中的那些能力.

源碼git

如下部分saas函數代碼可在源碼中查看
https://github.com/sherlock22...

爲了保證兼容性 使用saas抽象部分函數:

@charset "utf-8";
/**
 * sherlock221b
 * 動畫部分經常使用
 */


//transform 兼容
@mixin transform($value) {
  -webkit-transform: $value;
  transform: $value;
  -moz-transform: $value;
  -ms-transform: $value;
}

//transition 兼容
@mixin transition($value) {
  -webkit-transition: $value;
  transition: $value;
  -moz-transition: $value;
  -ms-transition: $value;
}

//animation 兼容
@mixin animation($animationName) {
  -webkit-animation: $animationName;
  -ms-animation: $animationName;
  -moz-animation: $animationName;
  -o-animation: $animationName;
  animation: $animationName;
}


//key frames 兼容
@mixin keyframes($animationName) {
  @-webkit-keyframes #{$animationName} {
    @content;
  }
  @-moz-keyframes #{$animationName} {
    @content;
  }
  @-o-keyframes #{$animationName} {
    @content;
  }

  @-ms-keyframes #{$animationName} {
    @content;
  }

  @keyframes #{$animationName} {
    @content;
  }
}

//animate mode 兼容
@mixin  animation-mode($mode){
  -webkit-animation-fill-mode: $mode !important;
  -moz-animation-fill-mode: $mode !important;
  -ms-animation-fill-mode: $mode !important;
  animation-fill-mode: $mode !important;
}

正文

栗子 ： 咱們有一個盒子,我但願它可以平移一段距離,而後旋轉,縮放,漸隱掉.

逗號流(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);
  }

標籤流(label)

此法是爲了解上述描述的弊端, 經過嵌套標籤來實現動畫

HTML

<div class="translate  ib animate">
                <div class="rotate ib animate">
                    <div class="lessen ib animate">
                        <div class="fadeOut ib animate">
                             <div class="box"></div>
                        </div>
                     </div>
                </div>
  </div>

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; }   
  
  .ib{
  display: inline-block;
}
.animate{
  -webkit-animation-play-state:paused !important;
  animation-play-state:paused !important;
}
.active .animate {
  -webkit-animation-play-state:running !important;
  animation-play-state:running !important;
}

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 : 使用標籤流製做的時候 若是元素絕對定位的屬性 請放在最外層標籤上面

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

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. 適當使用逗號流也有奇效

實際項目案例

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