Css3頁面板塊加載漸進動畫

只需要引入類名就可以了：

<div class="rightEntry"><span>從事職業：</span><p>前端開發工程師</p></div>

css樣式：

  /* 放大進入 */
  .loadScale{
    animation: loading1 1s;
  }
  @keyframes loading1
  {
  	from {transform: scale(0.8, 0.8);opacity: 0.4;}
  	to {transform: scale(1, 1);opacity: 1;}
  }
  /* 左漸進 */
  .leftEntry{
    animation: loading2 1s;
  }
  @keyframes loading2
  {
  	from {transform: translateX(-180px);opacity: 0.6;}
  	to {transform: translateX(0px);opacity: 1;}
  }
  /* 右漸進 */
  .rightEntry{
    animation: loading3 1s;
  }
  @keyframes loading3
  {
  	from {transform: translateX(180px);opacity: 0.6;}
  	to {transform: translateX(0px);opacity: 1;}
  }
  /* 上漸進 */
  .topEntry{
    animation: loading4 1s;
  }
  @keyframes loading4
  {
  	from {transform: translateY(-180px);opacity: 0.6;}
  	to {transform: translateY(0px);opacity: 1;}
  }
  /* 下漸進 */
  .bottomEntry{
    animation: loading5 1s;
  }
  @keyframes loading5
  {
  	from {transform: translateY(180px);opacity: 0.6;}
  	to {transform: translateY(0px);opacity: 1;}
  }