CSS 动画与变换属性详解

CSS 动画与变换属性详解

1. transform（变换）

1.1 基本概念

transform 属性允许您对元素进行 2D 或 3D 变换，包括旋转、缩放、移动（平移）和倾斜等操作。该属性不会改变文档布局，只影响元素的视觉呈现。

1.2 常用变换函数

函数	语法	描述	示例
平移	translateX(x), translateY(y), translate(x,y)	在水平和/或垂直方向移动元素	transform: translate(50px, 20px);
旋转	rotate(angle)	围绕元素中心旋转指定角度	transform: rotate(45deg);
缩放	scaleX(sx), scaleY(sy), scale(sx[, sy])	在X和/或Y轴方向缩放元素	transform: scale(1.5);
倾斜	skewX(angle), skewY(angle), skew(ax[, ay])	使元素沿X和/或Y轴倾斜指定角度	transform: skew(10deg, 5deg);
矩阵	matrix(a,b,c,d,e,f)	使用6值矩阵应用复杂2D变换	transform: matrix(1,0,0,1,50,50);
3D变换	translate3d(), rotate3d(), scale3d()	在3D空间中进行变换	transform: translate3d(10px, 20px, 30px);

1.3 transform-origin 属性

transform-origin 属性用于设置变换的基点（原点），默认值为元素的中心点 。

取值：

• 关键字 ：left, right, top, bottom, center
• 长度值：像素、em等具体单位
• 百分比：相对于元素尺寸的百分比

示例：

.element {
transform-origin: left top; /* 以左上角为变换原点 */
transform: rotate(45deg);
}

2. @keyframes（关键帧）

2.1 基本概念

@keyframes 规则用于创建动画序列，通过定义动画过程中特定时间点的样式状态（关键帧）来控制动画的中间步骤。

2.2 语法格式

@keyframes 动画名称 {
0% { /* 起始状态样式 */ }
50% { /* 中间状态样式 */ }
100% { /* 结束状态样式 */ }
}

2.3 关键帧选择器

选择器	等效值	描述
from	0%	动画开始状态
to	100%	动画结束状态
25%, 50%, 75%	-	动画过程中的特定时间点

示例：

@keyframes slide-in {
from {
transform: translateX(-100%);
opacity: 0;
}
50% {
opacity: 0.5;
}
to {
transform: translateX(0);
opacity: 1;
}
}

3. animation（动画）

3.1 基本概念

animation 属性是一个简写属性，用于将动画效果应用于元素。它包含了多个子属性的功能。

3.2 子属性详解

属性	描述	可选值	默认值
animation-name	指定要应用的@keyframes动画名称	自定义标识符或none	none
animation-duration	动画完成一个周期所需时间	时间值（s或ms）	0s
animation-timing-function	动画的速度曲线	ease, linear, ease-in, ease-out, ease-in-out, cubic-bezier()	ease
animation-delay	动画开始前的延迟时间	时间值（s或ms）	0s
animation-iteration-count	动画播放次数	数字或infinite	1
animation-direction	动画播放方向	normal, reverse, alternate, alternate-reverse	normal
animation-fill-mode	动画外部的样式应用方式	none, forwards, backwards, both	none
animation-play-state	动画播放状态	running, paused	running

3.3 animation 简写语法

animation: name duration timing-function delay iteration-count direction fill-mode play-state;

示例：

.element {
animation: slide-in 2s ease-in-out 0.5s infinite alternate forwards;
}

4. 综合应用示例

4.1 基本动画效果

.box {
width: 100px;
height: 100px;
background: blue;
animation: bounce 2s ease-in-out infinite;
}
@keyframes bounce {
0%, 100% {
transform: translateY(0);
}
50% {
transform: translateY(-30px);
}
}

4.2 复杂变换动画

.card {
transform-origin: center;
animation: card-animation 3s cubic-bezier(0.25, 0.46, 0.45, 0.94) alternate;
}
@keyframes card-animation {
0% {
transform: perspective(500px) rotateY(0deg) scale(0.8);
opacity: 0;
}
50% {
transform: perspective(500px) rotateY(180deg) scale(1.1);
opacity: 1;
}
100% {
transform: perspective(500px) rotateY(360deg) scale(1);
opacity: 1;
}
}

5. 浏览器兼容性提示

虽然现代浏览器对CSS动画和变换的支持良好，但在某些旧版本浏览器中可能需要添加供应商前缀：

.element {
-webkit-transform: rotate(45deg); /* Chrome, Safari */
-moz-transform: rotate(45deg); /* Firefox */
-ms-transform: rotate(45deg); /* IE 9 */
-o-transform: rotate(45deg); /* Opera */
transform: rotate(45deg);
}
@-webkit-keyframes example { /* Webkit前缀 */
from { opacity: 0; }
to { opacity: 1; }
}

以上表格和示例涵盖了CSS变换和动画的核心概念，可作为日常开发的快速参考。