缩小动画

2026-04-08 20:43:36|内容中心

我来为您介绍几种常见的缩小动画缩小动画实现方式：

1. CSS 缩小动画

缩小动画

基本缩放动画

缩小动画

/* 缩小到消失 */
.shrink-out {
animation: shrinkOut 0.3s ease forwards;
}
@keyframes shrinkOut {
from {
transform: scale(1);
opacity: 1;
}
to {
transform: scale(0);
opacity: 0;
}
}
/* 缩小到指定大小 */
.shrink-to-small {
animation: shrinkToSmall 0.3s ease forwards;
}
@keyframes shrinkToSmall {
to {
transform: scale(0.5);
}
}

带弹性的缩小动画

.shrink-bounce {
animation: shrinkBounce 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
@keyframes shrinkBounce {
0% {
transform: scale(1);
}
50% {
transform: scale(0.8);
}
70% {
transform: scale(0.85);
}
100% {
transform: scale(0.8);
}
}

2. JavaScript 实现

使用 Web Animations API

// 缩小到消失
element.animate([
{ transform: 'scale(1)', opacity: 1 },
{ transform: 'scale(0)', opacity: 0 }
], {
duration: 300,
easing: 'ease',
fill: 'forwards'
});
// 带回调的缩小动画
function shrinkElement(element, callback) {
const animation = element.animate([
{ transform: 'scale(1)' },
{ transform: 'scale(0)' }
], {
duration: 300,
easing: 'ease'
});
animation.onfinish = callback;
}

使用 GSAP（GreenSock）

// 安装：npm install gsap
import gsap from 'gsap';
// 简单缩小
gsap.to(element, {
scale: 0,
duration: 0.3,
ease: "power2.out"
});
// 缩小并旋转
gsap.to(element, {
scale: 0,
rotation: 180,
duration: 0.5,
ease: "back.in(1.7)"
});

3. 实用示例

模态框关闭动画

.modal.closing {
animation: modalClose 0.3s ease forwards;
}
@keyframes modalClose {
0% {
transform: scale(1);
opacity: 1;
}
100% {
transform: scale(0.8) translateY(20px);
opacity: 0;
}
}

列表项删除动画

.list-item.removing {
animation: removeItem 0.3s ease forwards;
}
@keyframes removeItem {
0% {
transform: scale(1);
height: auto;
opacity: 1;
}
50% {
transform: scale(0.8);
opacity: 0.5;
}
100% {
transform: scale(0);
height: 0;
opacity: 0;
margin: 0;
padding: 0;
}
}

按钮点击反馈

.button:active {
transform: scale(0.95);
transition: transform 0.1s ease;
}

4. 组合动画示例

/* 缩小并向上移动 */
.shrink-up {
animation: shrinkUp 0.4s ease forwards;
}
@keyframes shrinkUp {
0% {
transform: scale(1) translateY(0);
opacity: 1;
}
100% {
transform: scale(0.5) translateY(-20px);
opacity: 0;
}
}
/* 缩小到中心点 */
.shrink-to-center {
transform-origin: center;
animation: shrinkCenter 0.3s ease forwards;
}
@keyframes shrinkCenter {
to {
transform: scale(0);
}
}

5. 性能优化建议

使用 transform 和 opacity：这些属性不会触发重排，性能更好

启用 GPU 加速：

.animated-element {
transform: translateZ(0);
will-change: transform;
}

减少动画数量：避免同时过多元素动画

使用合适的缩小动画缓动函数：ease, ease-out通常更自然

6. React/Vue 示例

React 组件

function ShrinkComponent({ isVisible, onComplete }) {
const [isAnimating, setIsAnimating] = useState(false);
const handleClick = () => {
setIsAnimating(true);
setTimeout(() => {
setIsAnimating(false);
onComplete?.();
}, 300);
};
return (
<div 
className={`box ${isAnimating ? 'shrink-out' : ''}`}
onClick={handleClick}
>
点击缩小
</div>
);
}

Vue 组件

<template>
<div 
:class="['element', { 'shrink-animation': isShrinking }]"
@click="startShrink"
>
内容
</div>
</template>
<script>
export default {
data() {
return {
isShrinking: false
};
},
methods: {
startShrink() {
this.isShrinking = true;
setTimeout(() => {
this.isShrinking = false;
this.$emit('animation-complete');
}, 300);
}
}
};
</script>