CSS3过度属性

transition-：
    property: 过渡属性的名称
        none: 没有属性获得过渡效果
        all: 所有属性都变化(常用)
        property: 个性化过渡效果的css属性名称，多种用逗号分隔(比如宽,高)
    duration: 耗时
        time: 动画总时间（s/ms）
    timing-function: 速度曲线
        linear:匀速
        ease：慢快慢
        ease-in:慢开始
        ease-out:慢结束
        ease-in-out:慢开始和结束
        steps():分几步，像格子跳
    delay: 延迟
        time：延迟时间（s/ms）
*简写:
    transition: property duration timing-function delay
    transition: all 3s ease .5s;
    
*应用顶部导航栏移入时缓慢下拉
    过渡属性不可以应用于display:none和display:block
    因为none不占据页面空间
    解决方案：
        1.visibility: (hidden/visible)(隐藏/显示)
            控制页面显示和隐藏，占据页面空间(不推荐)
        2.height: 使高度变为0，overflow:hidden(溢出隐藏)
        在hover中，给一个高度，通过transion完成缓慢下拉效果

CSS3动画属性

动画的步骤: 定义动画和调用动画
定义动画:
    @keyframes 动画名{
      from{动画初始状态，即第一帧}
      to{动画结束状态，即最后一帧}(也可以用百分比细化)
      比如：50%{}
    }
调用动画:
    animation:
        name: 调用的动画名称
        duration: 耗时                
        timing-function: 动画的速度曲线
            同过度
        delay: 延迟
            time: s/ms
        iteration-count: 播放次数
            n: 次数
            infinite: 循环播放
        direction: 是否反向播放
            normal: 正常（默认）
            alternate: 反向播放