提示：过渡属性transition,动画属性animation，转化属性transform,裁剪属性clip-path,倒影属性box-reflect，模糊度属性filter
目录
一、transition
二、animation
三、transform
四、clip-path
五、box-reflect
六、filter
一、transition
过渡：以看见标签从一个属性变化到另一个属性值的过程。
transition-property:指定需要过渡的 CSS 属性。可以是单个属性名称，也可以是多个属性名称的列表，用逗号分隔。例如：width, height, color, 等。
transition-property: width;transition-duration:定义过渡的持续时间，以秒（s）或毫秒（ms）为单位。例如：0.5s, 1000ms
transition-duration: .5 s;transition-timing-function:定义过渡效果的时间函数。常见的时间函数包括 ease（默认值，慢速开始，然后加速）、linear（匀速）、ease-in（慢速开始）、ease-out（快速结束）、ease-in-out（慢速开始和结束），以及贝塞尔曲线函数等。
transition-timing-function: linear;
/*塞北尔曲线*/
transition-timing-function: cubic-bezier(0.035, 1.650, 0.670, 1.335); transition-delay:定义过渡开始之前的延迟时间，以秒（s）或毫秒（ms）为单位。例如：0.2s, 500ms。
transition-delay: 0s;transition:简写属性
/*transition: property duration timing-function delay;*/
transition: width .5s 0s linear;
二、animation
keyframes：动画帧数，通过@来定义动画
@keyframes ani {
from {
width: 100px;
}
to {
width: 1000px;
}
}@keyframes ani {
0% {
transform: translateX(0);
}
25% {
transform: translateX(-631px);
}
50% {
transform: translateX(-1262px);
}
75% {
transform: translateX(-1893px);
}
100% {
transform: translateX(-2524px);
}
}animation-name:指定要应用的动画名称，对应于 @keyframes 中定义的动画名称。
animation-name: ani;animation-duration:指定动画完成一个周期的持续时间，单位可以是秒（s）或毫秒（ms）。
animation-duration: 5s;animation-timing-function:指定动画的时间函数，控制动画的速度变化，常用的有 linear、ease、ease-in、ease-out、ease-in-out 等。
animation-timing-function: linear;animation-delay: 指定动画开始前的延迟时间，单位可以是秒（s）或毫秒（ms）。
animation-delay: 0s;animation-iteration-count: 指定动画的播放次数，可以是一个数字值或者 infinite 表示无限循环播放。
animation-iteration-count: infinite;animation-direction: 指定动画播放的方向，可以是 normal（默认，从头到尾）、reverse（反向播放）、alternate（正向和反向交替播放）或者 alternate-reverse（反向和正向交替播放）。
animation-direction: reverse;animation-fill-mode:指定动画在播放前后如何应用样式，可以是 none（默认，不改变样式）、forwards（在动画结束时应用最后一个关键帧的样 式）、backwards（在动画开始时应用第一个关键帧的样式）或者 both（同时应用 forwards 和 backwards）。
animation-fill-mode: forwards;指定动画的播放状态，可以是 running（默认，播放状态）或者 paused（暂停状态）。
animation-play-state：paused三、transform
用于对元素进行变换，包括旋转、缩放、移动和倾斜等。它可以通过不同的函数值来实现各种不同的变换效果。转换属性 (不会让标签脱离正常文档流)。
transform-style:设置3d空间
transform-style: preserve-3d;perspective: 设置透视距离(眼睛到界面的距离视距) 近大远小
perspective: 500px; translate:沿 x 和 y 轴移动元素。可以单独指定 x 和 y 的偏移量，也可以只指定一个。
transform: translate(50px, 20px);
/*3D场景*/
transform: translate3d(0px,0px,0)
rotate:旋转元素。角度值可以是正值（顺时针旋转）或负值（逆时针旋转）。
transform: rotate(45deg);
/*3D*/
transform: rotate3d(1,1,0,0deg);
scale:缩放元素。可以分别指定 x 和 y 方向上的缩放比例，也可以只指定一个值（等比缩放）。
transform:scale(1);
transform:scale(1,.5);skew:倾斜元素,沿x或y轴倾斜
transform: skew(0deg);组合用法： 可以组合多个变换函数来同时应用多种变换效果
transform: rotate3d(1,1,0,0deg) translate3d(0px,0px,0) scale(1) skew(0deg);四、clip-path
用于剪裁元素的可见部分。通过 clip-path 属性，可以定义一个 SVG 路径或基本形状，来确定元素的可见部分。
circle：裁剪圆形
clip-path: circle(
/* 半径 */
100px
/* 圆心坐标 */
at 0px 0px);circle：裁剪椭圆形
/* ellipse(x轴半径 y轴半径 at 圆心x 圆心y);*/
clip-path: ellipse(100px 30px at 100px 100px);
clip-path: 裁剪多边形
/*每段裁剪之间用逗号隔开*/
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
五、box-reflect
于创建元素的倒影效果。这个属性允许你在元素的底部添加一个或多个镜像。但需要注意的是，这个属性在大多数现代浏览器中并不被支持。
box-reflect: <direction> <offset> <mask-box-image>;
<direction>：指定了镜像的方向。可以是above（从上到下）、below（从下到上）、left（从左到右）、right（从右到左）。<offset>：指定了镜像的偏移量，用于控制镜像相对于元素的位置。<mask-box-image>：用于指定应用于镜像的遮罩图像。
六、filter
于对元素的可视化效果进行滤镜处理。它可以应用于图像、背景图片、SVG、文本以及任何可以使用 CSS 的可视化元素。
blur(): 模糊元素，可以指定模糊的半径。
filter: blur(3px);
brightness(): 调整元素的亮度，可以指定亮度的百分比。
filter: brightness(50%);
contrast(): 调整元素的对比度，可以指定对比度的百分比。
filter: contrast(200%);grayscale(): 将元素转换为灰度图像，可以指定灰度的百分比。
filter: grayscale(50%);hue-rotate(): 旋转元素的色相，可以指定旋转的角度。
filter: hue-rotate(90deg);invert(): 反转元素的颜色，可以指定反转的百分比。
filter: invert(100%);opacity(): 调整元素的不透明度，可以指定不透明度的百分比。
filter: opacity(50%);saturate(): 调整元素的饱和度，可以指定饱和度的百分比。
filter: saturate(200%);sepia(): 将元素转换为深褐色，可以指定褐色的百分比。
filter: sepia(80%);