（一）牛人动效

作者Andy Tran,编写语言HTML(Jade)/CSS(SCSS)/JS(Babel)

作者Rupert Breheny,编写语言HTML/CSS/JS

作者The Suitcase,编写语言HTML(Jade)/CSS(SCSS)

作者Fabrizio Cuscini,编写语言HTML(Jade)/CSS(SCSS)

作者Massimiliano Ranauro,编写语言HTML/CSS(SCSS)

作者 小编redblue_，编写语言HTML/CSS(SCSS)

（二）动效制作&详解（详解见注释！！！）

总结笔记(动态更新)
http://www.jianshu.com/p/7ebd24b67386

HTML

<div class="loader">
  <div class="ball"></div>
  <div class="box">loading......</div>
</div>

SCSS

1.设置变量$和@mixin

$fg:#ff4081;
$bg:#3f51b5;
$sg:#ffc107;
$lg:skyblue;
$kg:#ddcaa0;
@mixin inBody{
  width:100%;
  height:100vh;  
  display:block;
  margin:0;
  background:$bg;
  justify-content:center;
  text-align:center;
  display:flex;
}

2.搭建基本形

Screen Shot on 2016-09-18 at 10:50:22.png

body{
  @include inBody
}
.loader{
  top: 15%;
  height:80vh;
  position: absolute;
  justify-content:center;
  text-align:center;
}
.ball{
  left:45px;
  top:30px;
  width:60px;
  height:60px;
  border-radius:70px;
  background: tomato;
  animation: jump 3s linear infinite;
  transform:scale(1,1.1);
  position: relative;
}
.box{
  width:160px;
  height:30px;
  top:160px;
  background:$kg;
  justify-content:center;
  text-align:center;
  position: relative;
  border-radius:30px;
  line-height:30px;
}

2.加入动画

最终效果

关键帧参考：Timing(时间)，Spacing(距离)

@keyframes jump {
    0% {
        top: 0;
    width:60px;
    height:60px;
    border-radius:5px 5px 5px 5px;
    animation-timing-function: ease-out;
    transform:rotate(0deg);
    background:$fg;
    }
    4% {
        top: 50;
    width:60px;
    height:60px;
    transform:rotate(40deg);
    animation-timing-function: ease-out;
    }  
    13% {
        top: 110;
    width:60px;
    height:60px;
    animation-timing-function: ease-out;
    }  
    16% {
        top: 150px;
    width:60px;
        height: 60px;
    transform:rotate(135deg);
        animation-timing-function: ease-out;
    }  
    19% {
        top: 110;
    width:60px;
    height:60px;
    animation-timing-function: ease-out;
    }
    29% {
        top: 50;
    width:60px;
    height:60px;
    transform:rotate(20deg);
    border-radius:5px 5px 5px 5px;
    animation-timing-function: ease-out;
    background:$fg;
    }  
    32% {
        top: 0px; 
        height: 60px; 
        border-radius:5px 5px 5px 100px;
    transform:rotate(0deg);
    background:$lg;
    }
    35% {
        top: 50;
    width:60px;
    height:60px;
    animation-timing-function: ease-out;
    } 
    45% {
        top: 110;
    width:60px;
    height:60px;
    animation-timing-function: ease-out;
    }  
    48% {
        top: 160px; 
        height: 60px; 
    transform:rotate(-180deg);
        animation-timing-function: ease-out;
    background:$lg;
    }
    51% {
        top: 110;
    width:60px;
    height:60px;
    animation-timing-function: ease-out;
    }  
    61% {
        top: 50;
    width:60px;
    height:60px;
    border-radius:5px 5px 5px 100px;
    animation-timing-function: ease-out;
    background:$lg;
    }  
  64% {
        top: 0;
    width:60px;
    height:60px;
    transform:rotate(0deg);
    border-radius: 70px;
    background:$sg;
    }
    69% {
        top: 50;
    width:60px;
    height:60px;
    animation-timing-function: ease-out;

    }
    77% {
        top: 110;
    width:60px;
    height:60px;
    animation-timing-function: ease-out;
    }  
    80% {
        top: 160px;
    width:60px;
        height: 60px;
    transform:rotate(180deg);
        animation-timing-function: ease-out;
    }
  83% {
        top: 110;
    width:60px;
    height:60px;
    animation-timing-function: ease-out;
    } 
    97% {
        top: 50;
    width:60px;
    height:60px;
    border-radius: 70px;
    animation-timing-function: ease-out;
    background:$sg;
    }  
    100% {
        top: 0px; 
        height: 60px; 
    transform:rotate(0deg);
        border-radius:5px 5px 5px 5px;
    background:$fg;
  }

}

/友情提示：如果觉得此文有难度，请看小编之前文章（难度较低）或自行洗洗睡了～/

结束（下期更精彩哟～～～）