css盒子下来再弹上去最后固定的动画
时间: 2025-06-06 10:23:19 浏览: 11
### CSS 实现盒子下落反弹并固定的效果
要实现一个盒子先下落下再弹起最终固定的动画效果,可以利用 `@keyframes` 和 `animation` 属性来完成。以下是详细的说明:
#### 动画原理
通过定义一组关键帧(`@keyframes`),指定盒子在不同时间点的位置变化以及可能的变形操作(如缩放)。为了模拟“下落”和“反弹”的物理现象,可以通过调整 `transform: translateY()` 来控制垂直方向上的移动,并结合 `scaleY()` 创建压缩感。
#### 关键代码示例
```css
/* 定义关键帧 */
@keyframes dropBounce {
0% { transform: translateY(-100%) scaleY(1); }
40% { transform: translateY(0) scaleY(1.2); } /* 下落到地面并稍微压扁 */
60% { transform: translateY(-20%) scaleY(0.9); } /* 反弹起来一点高度 */
80% { transform: translateY(0) scaleY(1); } /* 再次回到原位 */
100% { transform: translateY(0) scaleY(1); } /* 固定位置 */
}
/* 应用到目标元素 */
.box {
width: 100px;
height: 100px;
background-color: red;
position: relative;
animation-name: dropBounce;
animation-duration: 2s; /* 整体动画持续时间为2秒 */
animation-timing-function: ease-in-out; /* 平滑过渡 */
animation-fill-mode: forwards; /* 让最后一帧保持不动 */
}
```
以上代码中,`dropBounce` 是自定义的关键帧名称[^2]。它描述了一个物体从上方掉落至底部的过程,在触底瞬间被轻微挤压后再恢复形状,并停留在终点处。
#### 解决方案解释
- **初始状态 (`0%`):** 设置盒子位于屏幕外顶部区域 (-100%)。
- **第一次接触地板 (`40%`):** 当达到约一半的时间节点时,让对象完全到达目的地 (translateY=0),同时增加其 Y 轴比例使其看起来像是受到撞击而变平。
- **回弹阶段 (`60%, 80%`):** 接着减少一些向下偏移量使视觉上有向上跃动的感觉;随后再次接近零值但恢复正常尺寸。
- **结束姿态 (`100%`):** 最终停止于设定的目标地点且形态不变。
此方法不仅实现了所期望的行为模式——即下降、碰撞后的反跳直至静止——而且由于采用了标准化技术标准编写而成,因此具有良好的跨浏览器兼容性特性[^3]。
#### 注意事项
如果希望该效果适用于多种分辨率下的布局,则需考虑响应式设计原则,比如使用百分比单位代替固定像素宽度/高度设置盒模型大小等措施以适应不同的视窗环境需求。
阅读全文
相关推荐



















