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;}
  }