.item{
    float: left;
    margin-right: 10px;
    padding: 5px;
    width:auto;
    height: 200px;
    color: #fff;
    list-style: none;
    text-align: center;
    line-height: 60px;
    opacity: 0; 
    animation-iteration-count: infinite;
    animation-duration: 10s;
    animation-delay: 2s;
    animation-fill-mode: both;   
  }
  
  .item img{
    width:auto;
    height:200px;
  }
  
  .haikei{
    width:847px;
    height:274px;
    background-image:url('../images/bg.jpg');
    position: relative;
  }
  
  .item:nth-child(1) {
    animation-name: li1;
    position: absolute;
    left:20px;
    top: 0;
    -moz-transform: rotate(-20deg);
    -webkit-transform: rotate(-20deg);
    -o-transform: rotate(-20deg);
    -ms-transform: rotate(-20deg);
    transform: rotate(-20deg);
  }
  
  .item:nth-child(2) {
    animation-name: li2;
    position: absolute;
    right:70px;
    top:0;
    -moz-transform: rotate(20deg);
    -webkit-transform: rotate(20deg);
    -o-transform: rotate(20deg);
    -ms-transform: rotate(20deg);
    transform: rotate(20deg);
  }
  
  
  .item:nth-child(3) {
    animation-name: li3;
    position: absolute;
    left:70px;
    top:10px;
    -moz-transform: rotate(30deg);
    -webkit-transform: rotate(30deg);
    -o-transform: rotate(30deg);
    -ms-transform: rotate(30deg);
    transform: rotate(30deg);
  }
  
  .item:nth-child(4) {
    animation-name: li4;
    position: absolute;
    right:260px;
    top:20px;
  }
  
  .item:nth-child(5) {
    animation-name: li5;
    position: absolute;
    left:400px;
    top:40px;
    -moz-transform: rotate(-20deg);
    -webkit-transform: rotate(-20deg);
    -o-transform: rotate(-20deg);
    -ms-transform: rotate(-20deg);
    transform: rotate(-20deg);
  }
  
  .item:nth-child(6) {
    animation-name: li6;
    position: absolute;
    right:20px;
    top:10px;
    -moz-transform: rotate(-10deg);
    -webkit-transform: rotate(-10deg);
    -o-transform: rotate(-10deg);
    -ms-transform: rotate(-10deg);
    transform: rotate(-10deg);
  
  }
  
  .item:nth-child(7) {
    animation-name: li7;
    position: absolute;
    left:200px;
    top:30px;
    -moz-transform: rotate(10deg);
    -webkit-transform: rotate(10deg);
    -o-transform: rotate(10deg);
    -ms-transform: rotate(10deg);
    transform: rotate(10deg);
  
  }
  
  .item:nth-child(8) {
    animation-name: li8;
    position: absolute;
    left:220px;
    top:0px;
    -moz-transform: rotate(20deg);
    -webkit-transform: rotate(20deg);
    -o-transform: rotate(20deg);
    -ms-transform: rotate(20deg);
    transform: rotate(20deg);
  }
  
  .item:nth-child(9) {
    animation-name: li9;
    position: absolute;
    left:60px;
    top:5px;
    -moz-transform: rotate(-10deg);
    -webkit-transform: rotate(-10deg);
    -o-transform: rotate(-10deg);
    -ms-transform: rotate(-10deg);
    transform: rotate(-10deg);
  
  }
  
  .item:nth-child(10) {
    animation-name: li10;
    position: absolute;
    right:150px;
    top:30px;
  }
  
  .item:nth-child(11) {
    animation-name: li11;
    position: absolute;
    right:250px;
    top:25px;
  }
  
  
  @keyframes li1{
      from{opacity: 0}
      0%{opacity: 0;}
      7%{opacity: 1; animation-timing-function: ease}
      70%{opacity: 1; animation-timing-function: ease}
  }
  @keyframes li2{
      from{opacity: 0}
      7%{opacity: 0}
      14%{opacity: 1; animation-timing-function: ease}
      70%{opacity: 1; animation-timing-function: ease}
  }
  @keyframes li3{
      from{opacity: 0}
      14%{opacity: 0}
      21%{opacity: 1; animation-timing-function: ease}
      70%{opacity: 1; animation-timing-function: ease}
  }
  @keyframes li4{
      from{opacity: 0}
      21%{opacity: 0}
      28%{opacity: 1; animation-timing-function: ease}
      70%{opacity: 1; animation-timing-function: ease}
  }
  
  @keyframes li5{
      from{opacity: 0}
      28%{opacity: 0}
      35%{opacity: 1; animation-timing-function: ease}
      70%{opacity: 1; animation-timing-function: ease}
  }
  
  @keyframes li6{
      from{opacity: 0}
      35%{opacity: 0}
      42%{opacity: 1; animation-timing-function: ease}
      70%{opacity: 1; animation-timing-function: ease}
  }
  
  @keyframes li7{
      from{opacity: 0}
      42%{opacity: 0}
      49%{opacity: 1; animation-timing-function: ease}
      70%{opacity: 1; animation-timing-function: ease}
  }
  
  @keyframes li8{
      from{opacity: 0}
      49%{opacity: 0}
      56%{opacity: 1; animation-timing-function: ease}
      70%{opacity: 1; animation-timing-function: ease}
  } 
  
  @keyframes li9{
      from{opacity: 0}
      56%{opacity: 0}
      63%{opacity: 1; animation-timing-function: ease}
      70%{opacity: 1; animation-timing-function: ease}
  } 
  
  @keyframes li10{
      from{opacity: 0}
      63%{opacity: 0}
      70%{opacity: 1; animation-timing-function: ease}
  }
  
  @keyframes li11{
      from{opacity: 0}
      75%{opacity: 0;
        transform: scale(1.0);
      }
      100%{opacity: 1; animation-timing-function: ease;
        transform: scale(1.5);
      }
  }