10个常用CSS动画效果，拿来就能用
做网页的时候，加点动画能让页面看起来更舒服，用户用着也更顺手。下面整理了10个项目中经常用到的css动画写法，覆盖了页面加载、按钮反馈、菜单弹出这些常见场景。代码都直接复制就能用，不用改。
01 卡片翻转效果
鼠标放上去卡片会微微抬起，还有点阴影，适合用来做产品展示或者功能卡片。
效果：卡片在鼠标悬停时向上移动并轻微倾斜，阴影变大变淡。
CSS代码：
.card {
/* 开启3D视角，数值越小立体感越强 */
transform: perspective(1000px) rotateX(0deg);
transition: all 0.3s ease;
box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}
.card:hover {
/* 抬起5像素，向后倾斜5度 */
transform: perspective(1000px) rotateX(5deg) translateY(-5px);
box-shadow: 0 20px 30px rgba(0,0,0,0.15);
}注意：如果卡片背面也有内容（比如双面卡片），需要加backface-visibility: hidden让背面隐藏。
02 下拉菜单平滑展开
菜单从收起状态到展开，高度从0变到自动。但CSS不能直接过渡height: auto，得用点技巧。
效果：点击按钮后，菜单从上往下慢慢展开。
CSS代码：
.menu {
max-height: 0; /* 初始高度为0 */
overflow: hidden; /* 超出部分隐藏 */
transition: max-height 0.3s ease-out;
background: #f5f5f5;
}
.menu.open {
max-height: 300px; /* 设一个比实际内容大的值 */
}说明：max-height的值要比实际内容高度大，比如菜单真正高度是150px，你可以设200px或300px。过渡时间会按这个值算，所以设太大动画会变快，自己把握。
html配合：
<div class="menu" id="menu">
<p>选项一</p>
<p>选项二</p>
<p>选项三</p>
</div>
<button onclick="document.getElementById('menu').classList.toggle('open')">
切换菜单
</button>03 图片画廊淡入淡出
多张图片轮播，用透明度控制显示，同时加一点缩放效果。
效果：当前图片清晰显示，其他图片透明隐藏，切换时有淡入淡出效果。
CSS代码：
.gallery {
position: relative;
width: 600px;
height: 400px;
}
.gallery-img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover; /* 保持图片比例，裁掉多余部分 */
opacity: 0;
transform: scale(0.95); /* 稍微缩小一点 */
transition: opacity 0.5s, transform 0.5s;
}
.gallery-img.active {
opacity: 1;
transform: scale(1); /* 恢复原大小 */
}说明：通过JS切换active类来控制哪张图片显示。object-fit: cover在图片尺寸不一的时候特别好用。
04 页面加载旋转动画
页面加载的时候放一个小圆圈在那儿转，告诉用户"正在加载"。
效果：灰色圆圈，上面有一段深色边在不停旋转。
CSS代码：
.loader {
width: 50px;
height: 50px;
position: relative;
}
.loader::after {
content: '';
display: block;
width: 100%;
height: 100%;
border: 4px solid #ddd; /* 浅色边框 */
border-top-color: #333; /* 顶部边框深色 */
border-radius: 50%; /* 变成圆形 */
animation: spin 1s linear infinite;
}
@keyframes spin {
to {
transform: rotate(360deg); /* 转一圈 */
}
}优点：纯CSS实现，不占JS线程，性能好。想换颜色改border-top-color就行。
05 输入框聚焦发光效果
表单输入框获得焦点时，周围出现发光效果，输入有效内容后边框变绿。
效果：鼠标点进去时输入框外圈亮蓝色，输入内容后边框变绿色。
CSS代码：
.input-field {
width: 100%;
padding: 10px;
border: 2px solid #ccc;
border-radius: 4px;
transition: box-shadow 0.3s, border-color 0.3s;
outline: none; /* 去掉默认的聚焦边框 */
}
.input-field:focus {
box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.25); /* 蓝色外发光 */
}
.input-field:valid {
border-color: green; /* 有内容时变绿 */
}性能提示：改box-shadow比改border性能好，因为重绘区域小。配合transform和opacity都是性能最好的动画属性。
06 导航栏滑动下划线
鼠标在不同菜单项之间移动时，下划线会平滑地滑动过去。
效果：一条蓝色的线，跟着鼠标移动到的菜单项滑动。
CSS代码：
.nav-container {
position: relative;
display: flex;
gap: 20px;
}
.nav-item {
padding: 10px 0;
cursor: pointer;
}
.nav-slider {
position: absolute;
bottom: 0;
left: 0;
height: 3px;
width: 50px; /* 和下划线宽度一致 */
background: #007bff;
transition: transform 0.3s ease;
}JS代码：
const items = document.querySelectorAll('.nav-item');
const slider = document.querySelector('.nav-slider');
items.forEach((item, index) => {
item.addEventListener('mouseenter', () => {
// 计算当前项的位置，让滑块移过去
const left = item.offsetLeft;
slider.style.transform = `translateX(${left}px)`;
});
});说明：JS负责计算位置，CSS负责滑动过程，各司其职。
07 模态框弹出动画
弹窗从中心慢慢放大出现，背景同时变暗。
效果：背景逐渐变暗，弹窗从很小放大到正常大小。
CSS代码：
.modal-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.5);
opacity: 0;
transition: opacity 0.3s;
pointer-events: none; /* 初始时不能点击 */
}
.modal-content {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(0.7);
background: white;
padding: 20px;
border-radius: 8px;
transition: transform 0.3s;
opacity: 0;
}
.modal.open .modal-overlay {
opacity: 1;
pointer-events: auto; /* 显示时可点击 */
}
.modal.open .modal-content {
transform: translate(-50%, -50%) scale(1);
opacity: 1;
}技巧：先显示遮罩，再放大弹窗，顺序对了感觉才自然。
08 进度条条纹动画
进度条加载时，里面的条纹在不停移动，表示正在处理中。
效果：绿色条纹进度条，条纹从左往右不停流动。
CSS代码：
.progress-bar {
width: 100%;
height: 20px;
background: linear-gradient(90deg,
#4cd964 25%,
#5ac8fa 50%,
#4cd964 75%);
background-size: 200% 100%;
animation: loading 1.5s infinite linear;
border-radius: 10px;
}
@keyframes loading {
0% {
background-position: 200% 0;
}
100% {
background-position: -200% 0;
}
}原理：背景图比进度条宽一倍，通过移动背景位置，造成条纹流动的错觉。
09 文字逐字渐显效果
文字一个字一个字地慢慢显示出来，适合标题或重点内容。
效果：一开始文字全透明，然后逐个字慢慢显示出来。
CSS代码：
.fade-text {
font-size: 24px;
}
.char {
opacity: 0;
animation: fadeIn 0.3s forwards;
}
@keyframes fadeIn {
to {
opacity: 1;
}
}JS代码：
// 把每个字包在span里，并设置动画延迟
const text = document.querySelector('.fade-text');
const chars = text.textContent.split('');
text.innerHTML = chars.map((char, index) => {
return `<spantoken interpolation">${index * 0.1}s">${char}</span>`;
}).join('');说明：用JS把文字拆开是方便的做法。如果你不想用JS，也可以手动在HTML里写span和设置--index变量。
10 3D立方体旋转
一个立方体，鼠标放上去就旋转，展示不同面。
效果：六个面组成的立方体，鼠标悬停时整体旋转。
CSS代码：
.cube {
position: relative;
width: 200px;
height: 200px;
transform-style: preserve-3d; /* 开启3D模式 */
transition: transform 1s;
}
.cube:hover {
transform: rotateY(180deg) rotateX(30deg);
}
.face {
position: absolute;
width: 200px;
height: 200px;
background: rgba(0,123,255,0.3);
border: 2px solid #007bff;
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
}
.front { transform: translateZ(100px); }
.back { transform: rotateY(180deg) translateZ(100px); }
.right { transform: rotateY(90deg) translateZ(100px); }
.left { transform: rotateY(-90deg) translateZ(100px); }
.top { transform: rotateX(90deg) translateZ(100px); }
.bottom { transform: rotateX(-90deg) translateZ(100px); }说明：translateZ的值是立方体边长的一半，这里是200px边长，所以用100px。每个面先旋转到对应方向，再往前推100px。
写在最后
这10个动画效果都比较基础，但你仔细看看会发现，翻来覆去用的就是那几个属性：transform、opacity、box-shadow、max-height。把这些用熟了，大部分页面交互动画都能应付。
需要的时候，直接把代码复制过去，改改颜色、时间和尺寸就能用。
本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！
