CSS过渡和动画的使用

一、过渡

通过过渡可以指定⼀个属性发⽣变化时的切换⽅式，平滑的过渡 需要在某种条件下触发，例如hover、active、focus情况下 ⼀次性的效果，不能循环，只能做简单的动画 只有两帧，设置动画初始值和结束值 IE10开始兼容，移动端兼容良好

1、哪些属性要过渡（选填）

transition-property: all;

2、 过渡的时间 ms/s 必写

transition-duration: 3s;

3、过渡变化曲线 选写

transition-timing-function: ease;

4、 过渡的延迟 选写 默认是0s

transition-delay: 2s;

5、 过渡的简写，过渡的时间是必写的，其他都有默认值

transition: all ease 2s 0s;

二、动画

动画的理解：动画和过渡类似，都是可以实现⼀些动态效果，不同的是过渡需要在某个属性发⽣变化时才能触发， 例如hover，acitve时，动画可以⾃动触发动画

调用动画首先要写关键帧

2.1、制定关键帧⽤的是@keyframes属性，指定关键帧主要有两种⽅法： ⽅法⼀： @keyframes 关键帧名称{ from{初始状态属性} to{结束状态属性}} ⽅法⼆： @keyframes 关键帧名称{ 0%{初始状态属性} 50%（中间还可以再添加关键帧） 100%{结束状态属性}

注意： 1、帧的顺序可以更改，不关顺序问题。如果初始帧不写，默认是原始设置，如果结束帧不写， 默认也是原始设置 2、可以同时设置关键帧，⽤逗号（,）隔开就行

2.2、调用关键帧和动画属性

1、animation-name 绑定到选择器的关键帧 的名称，告诉系统需要 执行那个动画(必填)

2、animation-duration 动画的完成时间，告诉 系统动画持续的时长 （必填）

3、animation-timing-function 设置动画如何完成一个 周期，告诉系统动画执 行的速度（与过度动画 类型）

可选值：

ease 默认值， 慢速开始，先加速，然 后再减速 linear 匀速运动 ease-in 先慢后快 加速运动 ease-out 先快后慢 减速运动 ease-in-out 以慢速开 始和结束的过渡效果 steps()分布执行过渡 效果

4、animation-delay 动画在启动前的延迟间 隔

5、animation-iteration-count 动画的播放次数，告诉 系统动画需要执行几次 infinite无限次往返执行

6、animation-direction 指定是否应给轮流反向 播放动画

可选值：

normal 默认值： 从 from向to运行，每次都是 这样 reverse 从to到from运 行，每次都是这样 alternate 从from向to运 行，重复执行动画时反向执 行 alternate-reverse 从to 向from运行，重复执行动 画时反向执 行

7、animation-fill-mode 规定当动画不播放时 （完成时，延时未开始 播放时），应用到的元 素样式

可选值：

none 默认值 动画执⾏完毕 元素回到原来的位置 forwards 动画执⾏完 毕，会停⽌在动画结束的位 置 backwards 动画延时等待 时，元素就会处于开始位置 both 结合了forwards和 ackwards的特点

8、animation-play-state 告诉系统当前动画是否 需要暂停 running 默认值 动画执 行 paused 动画暂停

9、animation简写 可以写以上任意 属性的可选值