CSS3引入了强大的动画和过渡效果功能，使得开发者能够无需依赖 JavaScript 就能创建丰富的交互效果。本文将详细介绍如何使用 CSS3 的动画和过渡效果。
过渡效果允许在一个时间段内平滑地改变 CSS 属性的值。使用 `transition` 属性可以定义过渡效果的属性、持续时间、延迟时间和过渡方式。
语法：
selector {
transition: property duration timing-function delay;
}
示例：
当点击按钮时，按钮的背景颜色和宽度会在 2 秒内平滑过渡：
#transitionButton {
padding: 10px 20px;
background-color: #e74c3c;
color: #fff;
border: none;
border-radius: 4px;
cursor: pointer;
transition: background-color 2s, width 2s;
}
#transitionButton:hover {
background-color: #c0392b;
width: 150px;
}
动画效果允许通过 `@keyframes` 规则定义一系列帧，并通过 `animation` 属性将这些帧应用到元素上。动画效果比过渡效果更加复杂和强大。
语法：
@keyframes animation-name {
keyframes-selector {
css-styles;
}
}
selector {
animation: name duration timing-function delay iteration-count direction fill-mode play-state;
}
示例：
下面的代码定义了一个动画，使一个方块在 4 秒内从左到右移动，然后返回：
@keyframes move {
0% { left: 0; }
50% { left: 200px; }
100% { left: 0; }
}
.box {
width: 50px;
height: 50px;
background-color: #3498db;
position: relative;
animation: move 4s infinite;
}
通过合理使用这些属性，可以创建出复杂且富有表现力的动画效果。