CSS 创建动画核心靠@keyframes关键帧 +animation属性配合，纯 CSS 实现无需 JS。首先用@keyframes定义动画的状态，写法是@keyframes 动画名 { 0%{起始样式} 100%{结束样式} }，也能简写from/to，还能加 50% 等中间帧定义过渡效果。关键帧的作用就是设定动画在不同时间点的样式，浏览器会自动补全中间的平滑过渡。定义好后，给目标元素添加animation属性绑定动画，比如animation: 动画名 2s 线性 无限循环。举个例子，定义旋转关键帧，给盒子绑定后就能自动转圈，操作简单，浏览器还会做性能优化，适合做循环、自动播放的视觉动效。
transition是过渡动画，animation是关键帧动画，两者用法和场景完全不同。过渡需要触发条件，比如 hover、点击、类名切换，只有起始和结束两个状态，只能控制单次或有限次的平滑变化，代码简单，适合简单交互，比如按钮悬浮变色、尺寸变化。而动画不需要触发，页面加载就能自动播放，依靠@keyframes定义多组关键帧，支持无限循环、延迟播放、暂停、反向播放等复杂效果，适合做循环旋转、入场动画等自主动效。简单说：过渡是「被动的状态平滑切换」，动画是「主动的多帧连续播放」，简单交互用过渡，复杂循环用动画。
CSS 动画和 JS 动画各有优劣，适用场景不同。CSS 动画优点拉满：性能极高，浏览器会用 GPU 硬件加速，不占用主线程，不会卡顿；代码极简，几行搞定，无 JS 依赖；维护成本低。缺点是可控性差，无法实现复杂逻辑、中途监听动画状态，只能做固定的简单动效。JS 动画正好相反：灵活性无敌，能动态修改参数、监听动画事件、实现物理轨迹、逻辑判断等复杂效果，适合游戏、自定义交互动画。缺点是性能较弱，处理不当会卡顿，代码量大。总结：简单循环、过渡动效用 CSS，复杂逻辑、自定义交互用 JS，两者也可以结合使用。
transform是 CSS 的元素变形属性，核心优势是不改变文档流、不影响布局，只做视觉上的变形，性能超高。它支持多种变形效果：平移translate、旋转rotate、缩放scale、倾斜skew，还有 3D 变形功能。常用场景特别多：用translate实现元素居中，不依赖宽高；用scale做悬浮放大效果，不撑破布局；用rotate做旋转动效；搭配 3D 属性做轮播、立体卡片。它是 CSS 动画的核心属性，几乎所有流畅的元素动效都离不开它，因为不会触发浏览器重排重绘，是页面动效优化的首选。
will-change是 CSS 性能优化属性，作用是提前告诉浏览器：这个元素马上要做变形、动画等变化，让浏览器提前分配 GPU 资源，做好渲染准备，避免动画卡顿掉帧。用法很简单，直接写will-change: transform;或will-change: opacity;，指定要变化的属性即可。但一定要注意：绝对不能滥用！不要全局添加，只给即将执行动画的元素用；动画结束后及时移除；不要同时声明多个变化属性；低版本浏览器不兼容。滥用会导致浏览器占用大量内存，反而让页面卡顿，它是专项优化工具，不是通用样式。
CSS 实现变色渐变不用图片，直接用background-image的渐变函数，支持三种常用渐变：线性渐变linear-gradient、径向渐变radial-gradient、锥形渐变conic-gradient。写法超简单，比如线性渐变background: linear-gradient(45deg, #ff6b6b, #4ecdc4);，可以自定义角度、多个颜色、颜色位置。渐变是纯代码实现，体积小、加载快，还能配合动画做动态渐变。常用于页面背景、按钮样式、标题美化、分割线等场景，替代传统的图片渐变，大幅提升页面加载速度，还能随时修改颜色，维护超方便。
clip是旧版裁剪属性，已经被淘汰，只能裁剪矩形，必须配合定位使用，限制极大。clip-path是新版主流裁剪属性，用来裁剪元素的可视区域，把元素切成各种形状，不改变元素本身尺寸。用法很灵活：clip-path: circle(50%)切圆形，polygon()切三角形、多边形，inset()切矩形，还支持 SVG 路径裁剪。主要用途：做异形图片、异形按钮、动画遮罩、视觉特效，纯 CSS 实现不用图片和 JS，代码简洁，兼容性也很好，是做创意视觉设计的必备属性。
object-fit专门用来控制img、video等替换元素的内容，在固定尺寸容器里的适配方式，解决图片拉伸变形的问题。常用值有 5 个：fill默认值，拉伸填满容器，会变形；contain等比缩放，完整显示内容，容器会留空白；cover最常用，等比缩放填满容器，超出部分裁剪，不变形；none保持原尺寸，超出容器直接裁剪；scale-down取contain和none中尺寸更小的效果。日常开发中，图片布局几乎都用cover，保证图片饱满又不变形，是响应式图片的核心属性。
outline外轮廓和border边框看起来相似，核心区别特别大。第一，outline不占用空间，不会改变元素尺寸，不影响布局；border属于盒模型，会占据尺寸，撑大元素。第二，outline只能统一设置四边样式，不能单独改某一边；border可以分别设置上下左右。第三，outline在元素最外侧，叠加在边框外面；border在元素边缘。第四，用法不同：outline常用于input聚焦高亮、按钮选中状态，不破坏布局；border用于元素装饰、布局分隔，是常规盒模型样式。
两个都是间距属性，针对的目标完全不同。letter-spacing控制单个字符的间距，中文汉字、英文每个字母、数字都算字符，适用所有文本，比如给标题设置letter-spacing: 2px，能让文字更松散美观。word-spacing控制单词的间距，只对空格分隔的英文单词生效，中文没有单词分隔，所以这个属性对中文几乎没用。简单记：中文排版只用letter-spacing，英文可以两者搭配，一个管字符间距，一个管单词间距，用途分工明确，不能混用。
