五、 CSS动画

动画的原理

• 视觉暂留作用
• 画面逐渐变化

css中的动画类型

• transition补间动画
• keyframe关键帧动画
• 逐帧动画

transition补间动画

• Chrome的console台可看animation
• 位置 - 平移（left/rigth/margin/transform）
• 方位 - 旋转（transform）
• 大小 - 缩放（transform）
• 透明度（opacity）
• 其他 - 线性变换（transform）
• transition:width 1s
  • 第一个值为动画属性
  • 第二个值为时间
  • transition-delay 动画延迟
  • 支持多个属性同时变换 transition:width 1s,backgound 3s;
  • 动画的时间属性transition-timing-function默认easing,可设置为linear(线性关系)
    • linear 线性匀速
    • ease-in-out 开头结尾慢，中间快
    • ease-in 开头慢，后面越来越快
    • CSS-Easing网站可自定义时间函数，甚至可以把曲线拉成负值，形成回冲

关键帧动画

• 相当于多个补间动画
• 与元素状态的变化无关，可直接播放动画
• 定义更加灵活

.container{
    width: 100px;
    height: 100px;
    background: red;
    animation: run 1s linear;
    animation-iteration-count: infinite;
}
@keyframes run{
    0%{
        width: 100px;
    }
    50%{
        width: 800px;
    }
    100%{
        width: 100px;
    }
}

• 属性
  • 关键帧只有首尾，可用from代替0%，to代替100%
  • animation-direction:reverse //反向，从100%-》0%
  • animation-iteration-count:动画次数
  • animation-play-state:pause //动画暂停
  • animation-fill-mode:forwards // 动画到100%的时候停住，backwards是100%时回到初始状态
  • 将0%和100%状态设置的一样，就会有动画来回播放的效果

逐帧动画

每一帧都是关键状态，中间不需要过渡，这就构成了逐帧动画

• 适用于无法补间计算的动画
• 资源较大
• 使用steps()

container{
    width: 100px;
    height: 100px;
    border: 1px solid red;
    background: url(./animal.png) no-repeat;
    animation: run 1s infinite;
    animation-timing-function: steps(1);
}
@keyframes run{
    0%{
        background-position: 0 0;
    }
    12.5%{
        background-position: -100px 0;
    }
    25%{
        background-position: -200px 0;
    }
    37.5%{
        background-position: -300px 0;
    }
    50%{
        background-position: 0 -100px;
    }
    62.5%{
        background-position: -100px -100px;
    }
    75%{
        background-position: -200px -100px;
    }
    87.5%{
        background-position: -300px -100px;
    }
    100%{
        background-position: 0 0;
    }
}

• 一张雪碧图，改变background位置来切换图片，图片切换过程中不做动画过渡，1s切换八次，每次切换过程保持静止，到关键帧位置才换图。steps表示关键帧之间有几个画面