css3过渡动画

过渡（transition）动画，就是从初始状态过渡到结束状态这个过程中所产生的动画。
所谓的状态就是指大小、位置、颜色、变形（transform）等等这些属性。
css过渡只能定义首和尾两个状态，所以是最简单的一种动画。
根据过渡动画的触发方式不同，可分为以下几点：
1.光标移过动画
最常用的过渡动画触发方式是使用：hover 伪类
案例：设计当光标经过菜单项时，以过渡动画形式从中文界面缓慢翻转到英文界面，或者从英文界面缓慢翻转到中文界面

设计过程：
第一步，设计菜单结构。在每个菜单项 （<div class="menu1">）中包含两个子标签：<div class="one">和<div class="two">,设计菜单项仅显示一个子标签，当光标经过时，翻转显示另一个子标签。

<div>
    <div class="menu1">
        <div class="one"><a href="#">首页</a></div>
        <div class="two"><a href="#">Home</a></div>
    </div>
</div>

第二步，设计菜单样式。固定大小，相对定位，禁止内容溢出，向左浮动实现并列显示。

.menu1 {
    width: 100px;
    height: 30px;
    position: relative;
    font-family: 微软雅黑;
    font-size: 12px;
    color: #fff;
    overflow: hidden;
    float: left;
}