CSS过渡

当一个元素从一个样式（关键帧）到另外一个样式（关键帧）变化时，我们可以使用过渡效果。纯CSS中，通常我们可以使用hover来作为样式变化的操作。

元素的样式能发生变化我们才有机会添加对应的过渡属性，过渡属性要加给元素全程生效的样式上。

选择器 {
  transition: 要过渡的属性名 过渡时间 过渡曲线 过渡延迟时间;
}

一个过渡效果的产生必定需要两个值：要过渡的属性名 过渡时间

过渡的属性名

如果我们要让宽度过渡就可以使用width

想让颜色过渡可以使用color

想让背景色过渡可以使用background-color

如果我们想要让所有的属性都过渡 可以使用 all

选择器 {
  transition-property: 属性名;
}

过渡属性不支持

不支持从display: none变成display:block;

不支持img1 变化到 img2

过渡时间

过渡持续时间，可以是s也可以是ms。

选择器 {
  transition-duration: 时间;
}

正常动画效果的过渡时间一般不会太长，因为太长显得动画很累赘，降低了用户的使用体验，所以大部分网站上的动画的时间一般在.2-.3之间也就是200ms-300ms左右。

过渡曲线

过渡的整体的效果。曲线控制的是我们的元素在不同时间上的一个过渡速度的问题。

选择器 {
  transition-timing-function: 动画函数;
}

• ease
• ease-in 淡入 刚开始很慢慢慢的变快
• ease-out 淡出 刚开始很快慢慢变慢
• ease-in-out 淡入淡出 刚开始慢然后变快最后再变慢
• linear 线性 匀速
• 贝塞尔曲线（贝济埃曲线）

这个曲线可以描述出所有的动画的形式

cubic-bezier.com

cubic-bezier(0,.69,.02,.99) 可以把这个值替换到对应的第三个属性的位置

选择器 {
  transition-timing-function: cubic-bezier(0,.69,.02,.99);
}

所谓的动画曲线，不需要我们去定义，有专门的动效设计师进行设计，然后提供元素的过渡时长，过渡曲线，过延迟时间给我们。我们要做的是根据这些参数，完成我们的过渡效果。

过渡延迟时间

让元素等待多久开始过渡。

选择器 {
  transition-delay: 1s;
}