vw 和 vh 是相对于视口宽高的单位，1vw 等于视口宽度的1%，1vh 等于高度的1%。结合 CSS animation 可创建响应式动画，如使用 left: -100vw 实现全屏滑入效果，或用 top: 70vh 制作垂直浮动提示。适用于滑动入场、背景流动等场景。需注意移动浏览器对 vh 解析偏差，可采用 svh 兼容；极端屏幕下建议结合 calc() 或媒体查询调整动画时长，避免 transform 中过度使用 vw/vh 引发形变。测试多设备表现确保一致性。
在CSS中，animation 与 vw、vh 单位结合使用，可以创建出响应式且视觉效果丰富的动画。这种组合特别适合现代网页设计，让动画元素随视口尺寸变化而自然调整。
什么是 vw 和 vh？
vw 表示“视口宽度的百分之一”，1vw 等于视口宽度的1%；vh 表示“视口高度的百分之一”，1vh 等于视口高度的1%。比如，在一个1920px宽的屏幕上，1vw 就是19.2px。
使用这些单位可以让动画的距离、大小或位移随屏幕尺寸自适应，避免在不同设备上出现错位或溢出。
将 vw/vh 用于 animation 属性
你可以在 @keyframes 中使用 vw 或 vh 来定义位移、缩放、透明度变化等动画过程。
立即学习“前端免费学习笔记（深入）”；
例如：让一个元素从左侧滑入，滑动距离基于视口宽度：
.element {
position: relative;
animation: slideIn 2s ease-in-out;
}
<p>@keyframes slideIn {
from {
left: -100vw; /<em> 从视口最左边外开始 </em>/
}
to {
left: 10vw; /<em> 滑动到距离左边10vw的位置 </em>/
}
}
这样无论用户使用手机还是显示器，动画的起始和结束位置都能按比例适配。
常见应用场景
- 全屏滚动提示：用 vh 控制元素上下浮动，模拟“下滑”提示动画，如 top: 70vh → 80vh → 70vh。
- 响应式渐显入场：配合 opacity 和 transform，使用 vw 调整位移动画的距离，避免小屏溢出。
- 背景位移动画：background-position 使用 vw 值实现横向流动效果，在不同屏幕宽度下保持协调。
注意事项
虽然 vw/vh 很实用，但也需注意：
- 某些移动浏览器对 vh 的解析存在偏差（如隐藏地址栏影响实际高度），可考虑使用
svh（small viewport height）等新单位做兼容。 - 极端屏幕尺寸可能导致动画过快或过慢，建议结合
calc()或媒体查询微调 animation-duration。 - 避免在 transform 中过度使用 vw/vh 进行旋转或倾斜，容易导致不可控的形变。
基本上就这些。合理使用 vw、vh 配合 animation，能让动画更灵活、更具响应性，提升用户体验。不复杂但容易忽略细节，关键是测试多设备表现。
