浙江建设职业技术学院尔雅网站烟台高新区建设局网站
前端知识速记–css篇：CSS3中的常见动画及实现方式
常见的CSS3动画
1. 过渡 (Transitions)
过渡是一种非常简单的动画效果，允许你在元素的状态变更时平滑过渡到新状态。
语法格式：
transition: property duration timing-function delay;
property：指定要过渡的CSS属性，例如background-color。duration：过渡的持续时间，例如0.5s。timing-function：过渡的速度曲线，例如ease。delay（可选）：延迟时间，例如0.2s。
实现示例：
.box {width: 100px;height: 100px;background-color: blue;transition: background-color 0.5s ease;
}.box:hover {background-color: red;
}
分析：当用户将鼠标悬停在 .box 元素上时，背景颜色会在0.5秒内从蓝色平滑过渡到红色。
2. 关键帧动画 (Keyframe Animations)
关键帧动画允许开发者定义动画的多个状态，可以创建复杂的动画效果。
语法格式：
@keyframes animation-name {from { /* 关键帧样式 */ }to { /* 关键帧样式 */ }/* 或者使用百分比 */0% { /* 关键帧样式 */ }50% { /* 关键帧样式 */ }100% { /* 关键帧样式 */ }
}.animation-class {animation: animation-name duration timing-function iteration-count direction;
}
animation-name：动画名称。duration：动画的持续时间，例如1s。timing-function：动画的速度曲线，例如infinite（无限循环）。iteration-count：迭代次数，例如infinite。direction：动画方向，例如alternate。
实现示例：
@keyframes example {0% {transform: translateY(0);}50% {transform: translateY(-20px);}100% {transform: translateY(0);}
}.box {animation: example 1s infinite;
}
分析：这个示例中，.box 元素向上移动20像素后再回到原位，整个动画持续1秒，并且会无限循环。
3. 动画延迟和方向
CSS3动画支持延迟和方向控制，可以为动画提供更多个性化效果。
语法格式：
.animation-class {animation-delay: time;animation-direction: direction;
}
time：延迟时间，例如0.5s。direction：动画方向，例如normal（正常）、reverse（反向）、alternate（交替）。
实现示例：
.box {animation: example 1s infinite alternate;animation-delay: 0.5s;
}
分析：此示例使用 alternate，使得动画在完成一个周期后反向执行，并且使用 animation-delay 延迟0.5秒开始。
4. 缩放和旋转
通过 CSS3 的 transform 属性，可以对元素进行缩放和旋转。
语法格式：
transform: scale(sx, sy);
transform: rotate(deg);
sx和sy：分别表示在 X 轴和 Y 轴上的缩放倍数。deg：旋转角度。
实现示例：
.box {transform: scale(1);transition: transform 0.3s ease;
}.box:hover {transform: scale(1.2);
}
分析：当元素被悬停时，它会在0.3秒内逐渐放大至1.2倍。
动画总结表
| 动画类型 | 特性 | 语法格式 | 示例代码 |
|---|---|---|---|
| 过渡 (Transitions) | 简单状态变更，平滑过渡 | transition: property duration timing-function delay; | .box:hover { background-color: red; } |
| 关键帧动画 (Keyframes) | 定义多个动画状态，复杂效果 | @keyframes name { ... } animation: name duration; | @keyframes example { ... } .box { animation: example 1s infinite; } |
| 动画延迟与方向 | 支持延迟和反向执行 | animation-delay: time; animation-direction: direction; | .box { animation: example 1s infinite alternate; } |
| 缩放和旋转 | 对元素进行缩放和旋转 | transform: scale(sx, sy); transform: rotate(deg); | .box:hover { transform: scale(1.2); } |