CSS3引入了变换、过渡和动画特性，使得网页可以呈现出丰富的视觉效果和交互体验。通过这些新特性，开发者可以创建复杂的动画效果，而不需要使用JavaScript。
4.1 变换（Transforms）
变换允许开发者对元素进行旋转、缩放、倾斜和平移操作。这些变换可以单独使用，也可以组合使用。
4.1.1 旋转（Rotate）
rotate 变换用于旋转元素。可以指定旋转的角度，正值表示顺时针旋转，负值表示逆时针旋转。
/* 旋转元素45度 */ .element { transform: rotate(45deg); }
4.1.2 缩放（Scale）
scale 变换用于缩放元素。可以指定水平和垂直方向的缩放比例。
/* 缩放元素为原始大小的两倍 */ .element { transform: scale(2); } /* 水平缩放两倍，垂直缩放一半 */ .element { transform: scale(2, 0.5); }
4.1.3 平移（Translate）
translate 变换用于平移元素。可以指定水平和垂直方向的位移。
/* 水平平移50px，垂直平移100px */ .element { transform: translate(50px, 100px); }
4.1.4 倾斜（Skew）
skew 变换用于倾斜元素。可以指定水平和垂直方向的倾斜角度。
/* 水平倾斜30度 */ .element { transform: skewX(30deg); } /* 垂直倾斜30度 */ .element { transform: skewY(30deg); } /* 同时进行水平和垂直倾斜 */ .element { transform: skew(30deg, 20deg); }
4.1.5 组合变换
可以将多种变换组合在一起使用。
/* 平移元素50px并旋转45度 */ .element { transform: translate(50px) rotate(45deg); }
4.2 过渡（Transitions）
过渡允许元素属性的变化在一段时间内平滑进行，提供了流畅的视觉效果。
4.2.1 定义过渡
transition 属性用于定义元素属性变化时的过渡效果。
/* 定义所有属性的过渡效果，持续时间为0.3秒，使用ease缓动效果 */ .element { transition: all 0.3s ease; }
4.2.2 指定过渡属性
可以指定特定属性的过渡效果。
/* 定义背景颜色和宽度的过渡效果 */ .element { transition: background-color 0.3s ease, width 0.3s ease; }
4.2.3 过渡效果示例
通过过渡效果改变背景颜色。
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>过渡效果示例</title> <style> .box { width: 100px; height: 100px; background-color: red; transition: background-color 0.5s ease; } .box:hover { background-color: blue; } </style> </head> <body> <div class="box"></div> </body> </html> 1 2 3 4 5 6 7
4.3 动画（Animations）
CSS3动画允许开发者通过定义关键帧动画来创建复杂的动画效果。
4.3.1 @keyframes规则
@keyframes 规则用于定义动画。关键帧指定了动画过程中不同时间点的样式。 @keyframes example { 0% { background-color: red; left: 0px; } 100% { background-color: yellow; left: 100px; } }
4.3.2 应用动画
animation 属性用于将动画应用到元素上。
/* 应用动画，持续时间为5秒，循环播放 */ .element { animation: example 5s infinite; }
4.3.3 动画属性
animation-name: 动画名称，与@keyframes定义的名称一致。
animation-duration: 动画持续时间。
animation-timing-function: 动画缓动效果，如ease、linear等。
animation-delay: 动画开始前的延迟时间。
animation-iteration-count: 动画循环次数，可以是数值或infinite。
animation-direction: 动画播放方向，可以是normal、reverse、alternate等。
4.3.4 动画示例
创建一个移动和改变背景颜色的动画。
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>动画示例</title> <style> @keyframes moveAndChange { 0% { background-color: red; transform: translateX(0); } 50% { background-color: yellow; transform: translateX(100px); } 100% { background-color: green; transform: translateX(200px); } } .box { width: 100px; height: 100px; background-color: red; animation: moveAndChange 4s infinite alternate; } </style> </head> <body> <div class="box"></div> </body> </html> 1
4.3.5 动画性能优化
为了确保动画流畅运行，可以采取以下措施优化动画性能：
使用硬件加速：通过使用transform和opacity属性，可以利用GPU加速渲染。
简化动画：避免过多复杂的动画效果，减少动画帧数。
控制动画数量：避免同时运行过多动画，确保动画的响应速度。
使用适当的缓动函数：选择适当的缓动函数，使动画更加自然流畅。
