CSS3动画效果有哪些
CSS3是CSS技术的最新版本，它引入了许多新的动画属性和技术，使得网页设计师可以创建更加生动、有趣的动画效果，以下是CSS3中一些常用的动画效果：
1. **转换（Transformations）**：转换是CSS3中一个非常强大的特性，它允许设计师对元素进行缩放、旋转、倾斜等操作，这些操作可以使用`transform`属性来实现，例如：`transform: scale(2)`可以将元素放大两倍。
2. **过渡（Transitions）**：过渡允许元素从一个样式逐渐改变为另一个样式，过渡可以通过`transition`属性来定义，例如：`transition: width 2s ease-in-out`可以让元素的宽度在2秒内平滑过渡。
3. **动画（Animations）**：动画允许设计师创建复杂的、时间控制的动画效果，动画可以通过`@keyframes`规则来定义，例如：
@keyframes example {
0% {background-color: red;}
50% {background-color: blue;}
100% {background-color: green;}
}
然后可以通过`animation`属性来应用这个动画，例如：`animation: example 5s infinite`。
4. **变形（Transformations）**：变形允许设计师对元素进行形状变换，例如旋转、缩放、倾斜等，这些操作可以通过`transform`属性来实现，例如：`transform: rotate(90deg)`可以将元素旋转90度。
5. **滤镜（Filters）**：滤镜可以用来修改元素的外观，例如模糊、调整亮度、调整对比度等，这些滤镜可以通过`filter`属性来实现，例如：`filter: blur(2px)`可以使元素模糊2像素。
6. **背景动画（Background Animations）**：CSS3允许设计师对元素的背景属性进行动画效果，例如背景颜色、背景图片等，这些可以通过`animation`属性和相关的背景属性来实现，例如：
animation: slide 5s infinite;
@keyframes slide {
0% {background-position: 0 0;}
50% {background-position: 100% 0;}
100% {background-position: 0 0;}
}
这个例子中，背景图片将会在5秒内从左到右平滑移动。
7. **阴影和光照效果（Shadows and Lighting Effects）**：CSS3允许设计师使用阴影和光照效果来增强元素的视觉效果，这些效果可以通过`box-shadow`、`text-shadow`和`filter`属性来实现，例如：`box-shadow: 10px 10px 5px grey`可以为元素添加一个灰色阴影。
8. **渐变（Gradients）**：CSS3允许设计师使用渐变来创建平滑的颜色过渡效果，这些渐变可以通过`linear-gradient`和`radial-gradient`函数来实现，例如：`background: linear-gradient(to right, red, yellow)`可以将背景色从左到右渐变从红色到黄色。
9. **弹性布局（Flexbox）**：弹性布局是一种新的布局模型，它允许设计师在容器中排列和对齐元素，而无需使用浮动或定位，这些布局可以通过`display: flex`和相关的属性来实现，例如：`flex-direction: column`可以将元素排列在垂直方向上。
10. **网格布局（Grid Layout）**：网格布局是一种新的布局模型，它允许设计师创建复杂的二维布局，这些布局可以通过`display: grid`和相关的属性来实现，例如：`grid-template-columns: 1fr 1fr`可以将网格分为相等的两列。
