04 动画

动画

动画(animation)是CSS3种具有颠覆性的特征之一, 可通过设置多个节点来精确控制一个或一组动画, 常用来实现复杂的动画效果
相比较过渡, 动画可以实现更多变化, 更多控制, 连续自动播放等效果

动画的基本使用

制作动画分为两步

1. 先定义动画
2. 再使用(调用)动画

用keyframes定义动画(类似定义器选择器)

语法:

@keyframes 动画名称 {
    0% {
        width: 100px;
    }
    100% {
        width: 200px;
    }
}

动画序列:

• 0%是动画的开始, 100%是动画的完成. 这样的规则就是动画序列
• 在**@keyframes**中规定某项CSS样式, 就能创建由当前样式逐渐改为新样式的动画效果
• 动画是使元素从一种样式逐渐变化为另一种样式的效果. 可以改变任意多的样式任意多的次数
• 用百分比来规定变化发生的时间, 或用关键词**from和to, 等同于0%和100%**

元素使用动画

div {
    width: 64px;
    height: 64px;
    background-color: aqua;
    /* 调用动画 */
    animation-name: move;
    /* 持续时间 */
    animation-duration: 5s;
}

动画常用属性

属性	描述
@keyframes	规定动画
animation	所有动画属性的简写属性, 除了animation-play-state属性
animation-name	规定动画@keyflames动画名称(必须)
animation-duration	规定动画完成一个周期所花费的时间(秒/毫秒)(必须)
animation-timing-function	规定动画的运动曲线, 默认是ease
animnation-delay	规定动画何时开始, 默认是0
animation-iteration-count	规定动画播放的次数, 默认是1, 还有infinite
animation-direction	规定动画是否在下一周期逆向播放, 默认是normal, altermate逆播放
animation-play-state	规定动画是否正在运行或暂停, 默认是running, 还有paused(唯一不包含的)
animation-fill-mode	规定动画结束后状态, 保持forwards回到起始backwards

动画简写属性

animation: 动画名称 持续时间 运动曲线 何时开始 播放次数 是否反向 动画起始或者结束的状态;
animation: name duration timing-function delay iteration-count direction fill-mode;
animation: myfirst 5s linear 2s infinite alternate;
前面两个属性必须写

• 简写属性里面不包含animation-play-state
• 暂停动画: animation-play-state: puased; 经常和鼠标经过等其他配合使用
• 想要动画走回来, 而不是直接跳回来: animation-direction: alternate;
• 盒子动画结束后, 停在结束位置: animation-fill-mode: forwards;

速度曲线细节

animation-timing-function: 规定动画的速度曲线, 默认是ease

值	描述
linear	匀速
ease	默认. 动画以低速开始, 然后加快, 在结束前变慢
ease-in	慢-快
ease-out	快-慢
ease-in-out	动画以低速开始和结束
steps()	指定了时间函数中的间隔数量(步长)