CSS3实现5个常用的网页动画效果

/* 定义关键帧 */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
 
@keyframes slideIn {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(0); }
}
 
@keyframes bounceIn {
    0% { transform: scale(0); }
    50% { transform: scale(1.5); }
    100% { transform: scale(1); }
}
 
@keyframes rotateIn {
    from { transform: rotate(-360deg); }
    to { transform: rotate(0); }
}
 
@keyframes zoomIn {
    0% { transform: scale(0.3); }
    100% { transform: scale(1); }
}
 
/* 应用动画效果 */
.fade-in {
    animation: fadeIn 2s ease-in forwards;
}
 
.slide-in {
    animation: slideIn 2s ease-in-out forwards;
}
 
.bounce-in {
    animation: bounceIn 2s ease-in-out infinite;
}
 
.rotate-in {
    animation: rotateIn 2s linear forwards;
}
 
.zoom-in {
    animation: zoomIn 2s ease-in-out forwards;
}

这段代码定义了5个常用的CSS3动画效果，并通过.fade-in、.slide-in、.bounce-in、.rotate-in和.zoom-in类来应用这些动画。每个动画都有其特定的关键帧定义，并且可以通过animation属性来设置动画的持续时间、时间函数、迭代次数和其他动画细节。