1.过渡：
过渡可以在不使用 F1ash 动画，不使用 JavaScript 的情况下，让元素从一种样式，平滑过渡为另一种样式
1.1.transition-property
常用值:
1.none:不过渡任何属性。
2. a11:过渡所有能过渡的属性。
3. 具体某个属性名 ，例如: width、 heigth，若有多个以逗号分隔。
1.2.transition-duration
作用:设置过渡的持续时间，即:一个状态过渡到另外一个状态耗时多久。
常用值:
1.0:没有任何过渡时间 -- 默认值。
2.s或 ms:秒或毫秒。
3.列表: 如果想让所有属性都持续一个时间，那就写一个值。如果想让每个属性持续不同的时间那就写一个时间的列表。
2.动画
/* 定义一个动画（定义一组动画）————第一种方式 */
@keyframes wydong{
/* 第一帧 */
from{
/* 这里面可以直接不写 */
}
/* 最后一帧 */
to{
transform: translate(1200px); /* 想实现的效果可以自己写 */
background-color: rgb(167, 148, 187); /* 想实现的效果可以自己写 */
}
}
/* 定义一个动画（定义一组关键帧）————第二种方式 */
@keyframes wydong2{
/* 第一帧 */
0%{
/* 这里面可以直接不写 */
}
/* 最后一帧 */
100%{
background-color: yellowgreen; /* 想实现的效果可以自己写 */
transform: translate(1200px); /* 想实现的效果可以自己写 */
border-radius: 50%; /* 想实现的效果可以自己写 */
}
}
3.区别：
过渡就像是手动挡，动画就像是自动挡。一个主动，一个被动；
过渡只看重结尾，动画看重全部过程。
