CSS3过渡
CSS3新增了过渡属性，可以从一个状态变化到另一个状态时，变化更加地平滑。
CSS3的过渡功能就像德芙巧克力那般，如丝一般顺滑，口感很好，哈哈🙆♀️
在W3C标准中是这样描述transition的，CSS3 的 transition 允许 CSS 的属性值在一定的时间区间内平滑的过渡。这种效果可以在鼠标单击，获得焦点，对元素任何改变中触发，并平滑地以动画效果改变 CSS 的属性值。
先看一个快速入门示例，如下：
https://code.juejin.cn/pen/7102227169891319839
在上面的代码中，我们让 div 被 hover 的时候，改变其宽度，但是我们可以看到效果非常的生硬。
此时我们就可以添加一个 CSS3 新增的属性 transition，使其两个状态变化之间纵享丝滑一下。
https://code.juejin.cn/pen/7102228636539256869
接下来我们来看一下 transition 的具体语法。
transition 属性是一个复合属性，它是由 transition-property，transition-duration，transition-timing-function 和 transition-delay 的一个简写属性。
- transition-property：指定过渡的 CSS 属性
- transition-duration：指定过渡所需的完成时间
- transition-timing-function：指定过渡函数
- transition-delay：指定过渡的延迟时间
- transition-property
该属性用来指定过渡动画的属性名称，可选值为
none，all，property需要特别说明的是，并不是所有的属性都可以进行过渡，只有属性是具有一个中点值的属性才能够进行过渡效果。因为这样才能通过不停的修改中间值从而实现过渡效果。例如 display:none|block 就没有中间值，所以无法应用过渡。
能够过渡的属性类型有颜色属性、具有长度值或百分比的属性、阴影、变形系列属性，具体支持过渡的属性可以参阅下表：
- transition-timing-function
该属性用于设置一个属性过渡到另一个属性所需要的时间，单位时间为秒（s）或者毫秒（ms）,默认值为0,
- transition-timing-function
该属性用于设置过渡速度，也是常说的贝塞尔曲线，分别有下取值：
- transition-delay
过渡延迟多久后触发，单位是秒或者毫秒，但是值可以是正整数，负整数和0，正整数和0都比较容易理解，主要说下负整数，负整数的计算会从整体过渡时间中做减法运算
https://code.juejin.cn/pen/7102250485159198727
- 多个元素过渡
如果要同时多个 CSS3 属性应用过渡效果，直接用逗号分离开即可，这种主要是针对每个属性过渡的时间不同的情况下。
🌰举个栗子：
背景颜色过渡时间为 .5s，而宽度的过渡时间为 .3s：
https://code.juejin.cn/pen/7102251385487360007
- 过渡事件
有时候，在 JS 中的某些操作需要过渡效果结束后再执行，此时事件类型中给我们提供了一个 transitionend 事件方便我们监听过渡效果是否结束，例如：
https://code.juejin.cn/pen/7102259530125279245
CSS3动画
在CSS3中新增了一个animation属性，可以制作出类似flash一样的动画出来
🌰举个栗子：
https://code.juejin.cn/pen/7102297136158638117
在上面的代码示例中，我们声明了一个名为 square 的动画，然后在 div 中运用了这个动画，整个动画的播放时间为 5s。
使用 CSS3 的 animation 制作动画包含两个部分：首先是用关键帧声明一个动画，其次是在 animation 调用关键帧声明的动画。
声明动画
在 CSS3 中，使用 @keyframes 来声明一个动画，语法为：
@keyframes animationname {
keyframes-selector {
css-styles;
}
}属性对应的说明如下：
在上面的示例中，我们声明动画的代码为：
@keyframes square{
0% {
left: 0;
top: 0;
}
25% {
left: 400px;
top: 0;
}
40% {
left: 400px;
top: 200px;
}
65% {
left: 0;
top: 200px;
}
100% {
left: 0;
top: 0;
}
}这里我们就声明了一个名为 square 的动画，设置了 5 个时间段，分别是 0%、25%、40%、65% 和 100% ，每个时间段都有对应的不同 CSS 样式，当动画执行时，从一个时间段到另一个时间段会自动运用过渡效果，所以我们可以看到整个流程是非常平滑的。
使用动画
@keyframes 只是用来声明一个动画，如果一个声明的动画不被调用，那么这个动画是没有任何意义的。
在 CSS3 中通过 animation 属性来调用动画。
语法如下:
animation: name duration timing-function delay iteration-count direction fill-mode play-state;前四个属性，我想大家应该很熟悉了，这四个属性同时也是transition的四个属性，这就不说了，主要看看后四个属性
- animation-iteration-count
这个属性定义了动画应该播放多少次，如果想要一只播放下去，那么次数就是无限次，所以属性值为
infinite - animation-direction
正常情况下，当动画播放完成之后，会立刻回到起始状态，但是如果设置了
animation-direction，这个属性可以规定动画是否要反向播放回去。可以设置的属性值有以下：
👉 需要注意的是，如果动画被设置只播放1次，这些属性都不会起作用，无论动画正向播放还是反向播放，都会算一次次数
- animation-fill-mode
主要用于设置动画播放完成后的状态，可以设置以下值
我们平常用得最多的就是 forwards，定义动画播放完后保持结束时候的样子。默认值为 none，表示动画将按预期进行和结束，在动画完成其最后一帧时，动画会反转到初始帧处。当取值为 backwards 时，会在动画结束时迅速应用动画的初始帧。
animation-play-state
该属性规定动画是正在运行还是暂停，语法是：
animation-play-state:paused|running- pasued: 指暂停动画
- running： 指正在运行的动画
该属性一般会配合JS一起使用，从而达到对动画播放状态的一个控制
动画对应事件
同样，动画也有对应的事件，与过渡只提供有 transitionend 事件不同的是，在 CSS 动画播放时，会发生以下三个事件：
- animationstart：CSS 动画开始后触发
- animationiteration：CSS 动画重复播放时触发
- animationend：CSS 动画完成后触发
