一. 过渡
1) 过渡的基本使用
过渡（transition）是一种在CSS中用于实现元素平滑过渡效果的属性。它可以为元素的某些属性在样式发生改变时添加一个过渡效果，使得元素从一个样式逐渐过渡到另一个样式。
步骤：
- 选择要添加过渡效果的元素：通过CSS选择器选择你想要应用过渡效果的元素。
.my-element {
/* 这里是元素的初始样式 */
}
- 定义过渡属性：使用transition属性来定义要过渡的属性和过渡时间。过渡属性可以是一个或多个属性的组合，并用逗号分隔。
.my-element {
transition: property duration timing-function delay;
}
- 属性（property）：指定要过渡的CSS属性名，例如 width、height、background-color等。
- 过渡时间（duration）：指定过渡效果的持续时间，单位可以是秒（s）或毫秒（ms）。
- 时间函数（timing-function）：指定过渡效果的速度曲线，可以使用预定义的值如linear、ease-in、ease-out等，也可以使用cubic-bezier()函数自定义速度曲线。
- 延迟（delay）：可选参数，指定过渡效果的延迟时间，单位可以是秒（s）或毫秒（ms）。
- 触发过渡效果：通过改变元素的样式来触发过渡效果，可以是鼠标悬停、点击事件等。
/* 当鼠标悬停在.my-element元素上时，元素会平滑过渡到新的样式 */
.my-element:hover {
/* 结束样式 */
}
注意: 过渡效果只会在样式发生改变时触发，所以要确保在触发过渡之前有一个初始样式和一个结束样式。
示例：
.my-element {
background-color: red; /* 初始背景颜色为红色*/
}
.my-element {
transition: background-color 1s ease-in-out 0.5s;
}
.my-element:hover {
background-color: green; /* 结束背景颜色为绿色 */
}
2) 过渡的缓动效果
过渡（transition）的缓动效果可以通过使用不同的“时间函数”（timing-
function）来实现。时间函数决定了过渡效果在时间轴上的变化速度和曲线形状，能够为过渡添加更加丰富的动态效果。
常用的时间函数：
- linear：线性过渡，即匀速过渡效果，从开始到结束持续时间内过渡效果保持恒定。
.my-element {
transition-timing-function: linear;
}
- ease：默认的时间函数，匀速过渡，适用于大部分情况。开始和结束时的过渡速度较快，中间部分较慢。
.my-element {
transition-timing-function: ease;
}
- ease-in：开始缓慢，然后加速过渡。
.my-element {
transition-timing-function: ease-in;
}
- ease-out：开始较快，然后减速过渡。
.my-element {
transition-timing-function: ease-out;
}
- ease-in-out：开始和结束时缓慢，中间部分较快。
.my-element {
transition-timing-function: ease-in-out;
}
除了预定义的时间函数，还可以使用cubic-bezier()函数定义自定义的时间函数，通过指定控制点的坐标来确定曲线形状。
.my-element {
transition-timing-function: cubic-bezier(x1, y1, x2, y2);
/* (x1, y1)和(x2, y2)分别表示曲线上的两个控制点的坐标，取值范围为0到1之间 */
}
二. 动画
CSS动画是一种用于为网页元素添加动态效果的技术。它可以通过CSS属性和关键帧（keyframes）来定义元素在动画过程中的样式变化，从而实现各种动画效果。
步骤：
- 定义关键帧：使用@keyframes规则，定义动画的关键帧。关键帧是指元素在动画过程中不同时间点上的样式定义。可以通过指定百分比或关键字（如from和to）来定义关键帧。
@keyframes myAnimation {
0% {
/* 初始样式 */
}
50% {
/* 中间样式 */
}
100% {
/* 结束样式 */
}
}
- 应用动画：选择要应用动画的元素，并使用animation属性来指定动画的名称、持续时间、时间函数等属性。
.my-element {
animation-name: myAnimation; /* 动画名称:myAnimation */
animation-duration: 2s; /* 持续时间:2s */
animation-timing-function: ease-in-out; /* 时间函数 */
animation-delay: 1s; /* 延迟时间:1s */
animation-iteration-count: infinite; /* 循环次数:无限循环 */
animation-direction: alternate; /* 播放方向:交替播放 */
}
- 可选：使用其他动画属性进行进一步配置，如animation-fill-mode（填充模式）、animation-play-state（播放状态）等。
.my-element {
animation-fill-mode: forwards; /* 填充模式为保持结束样式（forwards） */
animation-play-state: paused; /* 播放状态为暂停（paused） */
}
将所有的animation属性合并在一起 (顺序不可更改):
.my-element {
animation: myAnimation 2s ease-in-out 1s infinite alternate forwards;
}
常见动画效果的示例：
- 淡入淡出效果：
.fade-in-out {
animation: fadeInOut 2s ease-in-out infinite alternate;
}
@keyframes fadeInOut {
0% {
opacity: 0; }
100% {
opacity: 1; }
}
/* 创建了一个`fade-in-out`类，使元素在2秒内以渐变的方式从透明度0到1再到0，无限循环地交替执行。 */
- 平移效果：
.slide-in {
animation: slideIn 1s ease-out;
}
@keyframes slideIn {
0% {
transform: translateX(-100%); }
100% {
transform: translateX(0); }
}
/* 创建了一个`slide-in`类，使元素在1秒内沿着x轴从左侧滑动进入页面 */
- 旋转效果：
.rotate {
animation: rotate 2s infinite linear;
}
@keyframes rotate {
0% {
transform: rotate(0deg); }
100% {
transform: rotate(360deg); }
}
/* 创建了一个`rotate`类，使元素围绕自身中心点以线性方式无限旋转，每次旋转360度，执行时间为2秒 */
- 缩放效果：
.scale {
animation: scale 1s ease-in-out infinite alternate;
}
@keyframes scale {
0% {
transform: scale(1); }
100% {
transform: scale(1.2); }
}
/* 创建了一个`scale`类，使元素在1秒内以渐变的方式从原始大小缩放到1.2倍大小，然后再返回，无限循环地交替执行 */
三. 过渡与动画的区别
-
触发方式：过渡通常与状态伪类（如:hover、:focus等）搭配使用，当元素状态发生改变时会触发过渡效果。例如，当鼠标悬停在元素上时，过渡可以应用于改变其某个属性的平滑过渡效果。而动画则可以通过添加CSS类名或使用JavaScript来手动触发。
-
定义方式：过渡通过指定元素的初始状态和目标状态之间的平滑过渡来实现效果，通过设置过渡属性、持续时间、时间函数和延迟等来控制过渡效果。动画则是通过使用关键帧（keyframes）来定义元素在动画过程中的样式变化，可以对每个关键帧设置具体样式。
-
控制方式：过渡仅允许在两个状态之间进行过渡，仅执行一次。它的主要作用是提供平滑的过渡效果。动画可以进行复杂的样式变化，可以定义多个关键帧，改变多个属性，并且可以循环播放或反向播放。
-
应用场景：过渡通常适用于简单的、交互性的效果，如颜色、大小或位置的平滑过渡。动画适用于更复杂的效果，例如平移、旋转、缩放等连续的样式变化。