< p >CSS3 动画是现代 Web 开发的一个非常重要的技术，它可以让网页制作更加动态、交互、生动。下面为大家介绍一些 CSS3 动画源码的示例。 p>< pre >/* 定义一个从左侧进入的动画 */
@keyframes my-anim {
from { left: -200px; }
to { left: 0; }
}
/* 使用上述动画来制作从左侧进入的动画效果 */
.my-element {
animation: my-anim 1s ease;
}
/* 定义一个旋转的动画 */
@keyframes spin {
to { transform: rotate(360deg); }
}
/* 使用上述动画来制作一个旋转的按钮 */
.btn {
animation: spin 1s ease-in-out infinite;
}
/* 定义一个缩放的动画 */
@keyframes zoom {
0% { transform: scale(1, 1); }
50% { transform: scale(1.2,1.2); }
100% { transform: scale(1, 1); }
}
/* 使用上述动画来制作一个缩放的图像 */
.img {
animation: zoom 2s ease-in-out infinite;
}
/* 定义一个淡入淡出的动画 */
@keyframes fade {
from { opacity: 0; }
to { opacity: 1; }
}
/* 使用上述动画来制作一段淡入淡出的文字 */
.text {
animation: fade 2s ease-in-out alternate-reverse infinite;
}< /pre >< p >以上四个例子仅仅是 CSS3 动画的冰山一角，开发者们可以创造出更加丰富多彩、独具创意的动画效果来，让网页展现更加鲜明的个性。当然，在开发过程中也需要注意动画的使用，合理运用动画可以增加用户体验，但过度使用则可能会降低网页性能和用户使用感受。 p>