这是一组移动手机（Mobile）APP打开菜单时的过渡动画特效。这组过渡动画共有15种效果，分别使用CSS3 animation动画来制作，这些动画均由线条和文字组成，效果非常炫酷。
这15种移动手机APP打开菜单动画效果所需的CSS动画样式都写在各自的页面中，同时使用少量的JavaScript代码来为元素切换相应的class类。
所有的例子都使用相同的HTML结构：其中，.mobile-inner-header-icon是汉堡包图标，.mobile-inner-header-icon-out class类用于制作图标的动画效果。两个空的<span>元素用于制作汉堡包图标的线条。
<div class="mobile"> <div class="mobile-inner"> <div class="mobile-inner-header"> <div class="mobile-inner-header-icon mobile-inner-header-icon-out"> <span></span><span></span> </div> </div> <div class="mobile-inner-nav"> <a href="#">Home</a> <a href="#">Services</a> <a href="#">Portfolio</a> <a href="#">Blog</a> <a href="#">About</a> <a href="#">Contact</a> </div> <img src="_assets/photo1.jpg"/> <p>......</p> <p>......</p> </div> </div> </div> </div>
以第一种动画的CSS样式为例子，在第一种APP导航菜单特效中，首先为导航项添加一些通用的样式：
.mobile-inner-nav a{ display: inline-block; line-height: 50px; text-decoration: none; width: 80%; margin-left: 10%; color: #FFFFFF; border-bottom: solid 1px rgba(255,255,255,0.3); -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; font-weight:300; } .mobile-inner-nav a:hover{ color: rgba(255,255,255,0.4); border-bottom: solid 1px rgba(255,255,255,0.2); }