CSS3引入了许多强大的功能，其中动画和过渡效果是两个非常重要的特性，它们可以使网页更加生动和有趣。本文将详细介绍如何使用CSS3中的`@keyframes`规则和`transition`属性来实现动画和过渡效果。
过渡效果允许元素在特定属性变化时，以一种平滑的方式进行过渡。通常用于颜色、大小、位置等属性的变化。
当鼠标悬停在下面的按钮上时，它会逐渐改变颜色和大小：
.transition-example {
padding: 10px 20px;
font-size: 16px;
color: #fff;
background-color: #007BFF;
border: none;
border-radius: 4px;
cursor: pointer;
transition: background-color 0.3s ease, transform 0.3s ease;
}
.transition-example:hover {
background-color: #0056b3;
transform: scale(1.1);
}
动画效果是通过`@keyframes`规则定义的，它可以控制元素在一段时间内的属性变化。相比于过渡效果，动画效果更加复杂和灵活。
下面的方块将执行一个简单的动画：
@keyframes exampleAnimation {
0% {
transform: translateX(0);
opacity: 1;
}
50% {
transform: translateX(100px);
opacity: 0.5;
}
100% {
transform: translateX(0);
opacity: 1;
}
}
.animation-example {
width: 100px;
height: 100px;
background-color: #28a745;
animation: exampleAnimation 2s infinite;
}
CSS3中的动画和过渡效果为网页增添了丰富的动态效果，提升了用户体验。通过合理使用这些特性，可以创建出更加生动和吸引人的网页。