以下是一个示例，演示如何使用 CSS3 创建多个不同的动画效果。这里使用了 @keyframes 规则，并通过 CSS 类来应用不同的动画效果：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Multiple CSS Animations</title><style>/* 公用样式 */.animated-element {width: 100px;height: 100px;background-color: #3498db;margin: 10px;display: inline-block;border-radius: 5px;}/* 旋转动画 */.rotate {animation: rotate 2s infinite linear;}@keyframes rotate {from {transform: rotate(0deg);}to {transform: rotate(360deg);}}/* 缩放动画 */.scale {animation: scale 1.5s infinite alternate;}@keyframes scale {from {transform: scale(1);}to {transform: scale(1.2);}}/* 渐变动画 */.fade {animation: fade 2s alternate infinite ease-in-out;}@keyframes fade {from {opacity: 1;}to {opacity: 0.3;}}</style>
</head>
<body><div class="animated-element rotate"></div><div class="animated-element scale"></div><div class="animated-element fade"></div>
</body>
</html>
这个例子中定义了三个不同的动画效果：旋转、缩放和渐变。每个动画都有自己的 @keyframes 规则，并通过添加相应的 CSS 类（.rotate、.scale、.fade）来将动画应用到不同的元素上。您可以根据需要调整动画的持续时间、缓动函数和其他属性。
这只是一个基本的示例，实际上您可以根据具体的设计需求和创意添加更多的动画效果。
