丝滑的感觉并不是通过增加更多的动画来实现的，而是把运动交给合适的属性、合适的时间顺序和合适的层次中去完成。在CSS3中，transition用来做两个状态之间平滑过渡的效果，而@keyframes则用于创建多步骤的节奏以及循环的生命感——两者各司其职，混合使用就会显得杂乱无章。
悬停、聚焦和开关状态使用 transition 最合适：
.btn {
transition: transform .2s cubic-bezier(.2,.8,.2,1), background .2s ease;
}
.btn:hover {
transform: translateY(-2px);
background: #5a3ff0;
}
在需要进入、呼吸、加载和轮播的时候使用@keyframes：
@keyframes fadeUp {
from { opacity: 0; transform: translateY(16px); }
to { opacity: 1; transform: translateY(0); }
}
.card { animation: fadeUp .5s cubic-bezier(.16,1,.3,1) forwards; }
性能底线只有一条：优先使用 transform、opacity 属性来改变元素的位置或者透明度，不要使用 top/left/width/height 等属性去修改它们，否则会引发重排；box-shadow 直接修改的话就会引起重绘，在低端机上会导致掉帧。对于复杂的元素可以加上 will-change: transform 来优化性能，但是不能全部用上，动画结束后要及时释放资源。
缓动曲线决定了“高级感”，linear 用于旋转，ease-out 用于进入，cubic-bezier(.16,1,.3,1) 快出慢停、最接近物理惯性，列表交错入场用 animation-delay 阶梯式展开，比同时出现更有层次感。
保留降级通道：
@media (prefers-reduced-motion: reduce) {
* { animation: none !important; transition: none !important; }
}
动画的作用在于吸引观众的目光，并不是为了炫耀技术。用少量的关键帧来表现整个画面要比满屏幕乱飞更显得专业一些。
总结
过渡管状态、关键帧管节奏；只改变transform/opacity，使用缓动代替匀速，用交错代替堆叠，通过prefers-reduced-motion来保证可访问性。丝滑交互=正确的属性+克制的设计+对性能敬畏
