当前位置：首页 > news >正文

CSS Animation 详解

news 来源：原创 2025/5/31 4:38:35

CSS Animation 允许元素平滑地从一个样式状态过渡到另一个样式状态。通过设置关键帧（keyframes），可以控制动画序列中的中间步骤。

一、核心概念

1.关键帧（Keyframes）

使用 @keyframes 规则定义动画序列
通过百分比或 from/to 指定动画阶段
每个阶段可以设置元素的样式属性

2.动画属性

animation-name: 指定关键帧名称
animation-duration: 动画持续时间（秒或毫秒）
animation-delay: 动画延迟开始时间
animation-iteration-count: 循环次数（数字或 infinite）
animation-direction: 动画方向（normal, reverse, alternate）
animation-timing-function: 速度曲线（ease, linear, ease-in-out）
animation-fill-mode: 动画前后的状态（forwards, backwards, both）
animation-play-state: 动画播放状态（running, paused）

3.示例代码

下面是一个包含多种动画效果的完整示例：

html

预览

<!DOCTYPE html>
<html>
<head>
<style>
/* 基础样式 */
.container {width: 500px;height: 300px;border: 1px solid #ccc;margin: 20px auto;position: relative;
}/* 1. 简单移动动画 */
.box {width: 50px;height: 50px;background: #3498db;position: absolute;top: 20px;/* 应用动画 */animation: move 3s infinite;
}@keyframes move {0% { left: 20px; }50% { left: 430px; }100% { left: 20px; }
}/* 2. 旋转+透明度变化 */
.circle {width: 40px;height: 40px;background: #e74c3c;border-radius: 50%;position: absolute;top: 100px;left: 20px;animation: rotateAndFade 4s infinite linear;
}@keyframes rotateAndFade {0% { transform: rotate(0deg); opacity: 1; }50% { opacity: 0.3; }100% { transform: rotate(360deg); opacity: 1; }
}/* 3. 弹跳动画 */
.ball {width: 30px;height: 30px;background: #2ecc71;border-radius: 50%;position: absolute;top: 180px;left: 20px;animation: bounce 1s infinite alternate ease-in;
}@keyframes bounce {to {top: 220px;height: 25px;}
}/* 4. 悬停触发动画 */
.button {position: absolute;top: 240px;left: 20px;padding: 10px 20px;background: #9b59b6;color: white;border-radius: 5px;text-align: center;cursor: pointer;transition: all 0.3s;
}.button:hover {animation: pulse 1s infinite;
}@keyframes pulse {0% { transform: scale(1); }50% { transform: scale(1.05); }100% { transform: scale(1); }
}/* 5. 复杂动画序列 */
.combo {width: 40px;height: 40px;background: #f39c12;position: absolute;top: 100px;left: 440px;animation: combo 6s infinite;
}@keyframes combo {0% { transform: translate(0, 0) rotate(0deg); }25% { transform: translate(-200px, 0) rotate(90deg); }50% { transform: translate(-200px, 100px) rotate(180deg); }75% { transform: translate(0, 100px) rotate(270deg); }100% { transform: translate(0, 0) rotate(360deg); }
}</style>
</head>
<body><div class="container"><div class="box"></div><div class="circle"></div><div class="ball"></div><div class="button">Hover Me</div><div class="combo"></div>
</div></body>
</html>

二、高级技巧

1.多动画组合

css

.element {animation: fadeIn 1s,slideUp 0.8s ease-out,pulse 3s 2s infinite;
}

动画事件监听（JavaScript）

javascript

const element = document.querySelector('.box');element.addEventListener('animationstart', () => {console.log('动画开始');
});element.addEventListener('animationend', () => {console.log('动画结束');
});element.addEventListener('animationiteration', () => {console.log('动画循环一次');
});

使用 cubic-bezier 自定义速度曲线

css

animation-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);

三、浏览器兼容性

大多数现代浏览器都支持 CSS Animation，但建议添加前缀以确保兼容性：

css

.element {-webkit-animation: fadeIn 1s; /* Safari 4+ */-moz-animation: fadeIn 1s; /* Firefox 5+ */-o-animation: fadeIn 1s; /* Opera 12+ */animation: fadeIn 1s; /* Chrome, IE 10+ */
}

CSS Animation 为网页添加了丰富的交互体验，合理使用可以增强用户体验而不会造成干扰。