前端知识速记--css篇：CSS3中的常见动画及实现方式

前端知识速记–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); }