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变换和动画的核心概念，可作为日常开发的快速参考。