css3 滑入滑出动画效果

CSS3作为前端开发的重要组成部分，为网页增添了更多的视觉效果和交互动画。其中，滑入滑出动画效果可以让网页更具动感，提升用户体验，下面就介绍几个常用的滑入滑出动画效果。

/*1.淡入淡出*/.fadeIn{
    animation: fadeIn 1s;
    opacity: 1;
}
.fadeOut{
    animation: fadeOut 1s;
}
@keyframes fadeIn{
0%{
    opacity: 0;
}
100%{
    opacity: 1;
}
}
@keyframes fadeOut{
0%{
    opacity: 1;
}
100%{
    opacity: 0;
}
}
/*2.左右滑动*/.slideLeft{
    animation: slideLeft 1s;
    transform: translateX(0);
}
.slideRight{
    animation: slideRight 1s;
    transform: translateX(100%);
}
@keyframes slideLeft{
0%{
    transform: translateX(-100%);
}
100%{
    transform: translateX(0);
}
}
@keyframes slideRight{
0%{
    transform: translateX(0);
}
100%{
    transform: translateX(100%);
}
}
/*3.上下滑动*/.slideUp{
    animation: slideUp 1s;
    transform: translateY(0);
}
.slideDown{
    animation: slideDown 1s;
    transform: translateY(100%);
}
@keyframes slideUp{
0%{
    transform: translateY(-100%);
}
100%{
    transform: translateY(0);
}
}
@keyframes slideDown{
0%{
    transform: translateY(0);
}
100%{
    transform: translateY(100%);
}
}
    

以上就是三种常见的滑入滑出动画效果，我们可以根据实际需求进行选择和修改，让网页更加生动有趣。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！