list动画

俩个有趣的动画

 TweenMax.staggerFrom(".btn",2,{scale:0.5,opacity:0, delay:0.5, ease:Elastic.easeOut},0.2)
     TweenMax.staggerFrom(".b",2,{scale:0.5,opacity:0,cycle:{x:[-100,100]}, ease:Elastic.easeOut});

html代码

<ul class="nav">
    <li class="btn">new game</li>
    <li class="btn"> options</li>
    <li class="btn"> credits</li>
    <li class="b">name</li>
    <li class="b">name</li>
    <li class="b">name</li>
    <li class="b">name</li>
    </ul>

css代码

body, html {
  font-family: Signika Negative, sans-serif;
  background: #111;
  color:#efefef;
  height:100%;
}
.btn {
  border: none;
  text-align:center;
  cursor: pointer;
  padding: 25px 80px;
  margin: 25px 30px;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 700;
  outline: none;
  position: relative;
  background-color:rgb(38, 38, 38);
  border: solid 1px transparent;
  border-radius:10px;
  -webkit-font-smoothing: antialiased;
}

.nav {
  position:relative;
  width:350px;
  margin:auto;
  overflow:hidden;
  background-color:#1d1d1d;
  height:90%;
}
.b{
margin:0 200px 0 0;
}