Javascript 我可以只使用CSS3制作类似的动画吗

我正在一个网站上工作，现在我必须做一个完全像这样的介绍动画

在这个网站上，当我加载页面时，徽标和背景会向左滑动。 我的客户希望他的网站上有这种效果

现在，我使用以下html代码创建一个页面intro.php：

<div class="intro">
    <div class="logo-intro"></div><!-- /.logo logo-intro -->
</div><!-- /.intro -->
<div class="black_overlay"></div><!-- /.logo logo-intro -->

动画结束后，我使用javascript将intro.php重定向到主页

// Your application has indicated there's an error
window.setTimeout(function(){
// Move to a new location or you can do something else
var url = "http://www.gaelscalpaesthetics.com/accueil";    
$(location).attr('href',url);
}, 4000);

这是工作，但我如何才能使这个动画没有重定向

---

关于，

简单地说，您可以将代码放在主页中，并在页面加载时运行它，动画结束后，显示您的内容。

尝试类似的方法

body，html{
最大宽度：100%；
溢出x：隐藏；
}
标志
.黑色背景{
显示器：flex；
最小高度：100vh；
最小宽度：100vw；
位置：固定；
证明内容：中心；
对齐项目：居中；
字体大小：50px；
}
.标志{
z指数：1；
背景：白色；
动画：animateLogo 2秒缓进缓出1.3秒前进；
}
.黑色背景{
背景：黑色；
z指数：2；
转化：translateX（100vw）；
动画：animateBlackBg 1.5s缓进缓出1.5s前进；
}
.内容{
显示器：flex；
弯曲方向：行；
高度：100vh；
宽度：100%；
}
.内容img{
弹性：1；
填充：20px；
}
@动画关键帧{
80% {
转换：translateX（-100vw）；
不透明度：1；
}
100% {
转换：translateX（-100vw）；
不透明度：0；
}
}
@设置关键帧动画eblackbg{
40% {
变换：translateX（0）；
不透明度：1；
}
80% {
变换：translateX（0）；
不透明度：1；
}
100% {
变换：translateX（0）；
不透明度：0；
}
}

LOGO

在javascript中，您可以清楚地看到，4秒（4000）后，用户将被重定向到给定的“url”。如果你不想这样，只需删除注释（//）代码。谢谢你的帮助。代码运行得很好。这是我的第一个解决方案。我将intro div作为覆盖放置在主页上，就像您的解决方案一样，但每次我转到主页时，动画都会加载。动画必须在主页上只加载一次。很高兴我能提供帮助，我建议您针对该特定问题提出另一个问题。此外，如果这个答案或任何其他答案解决了您的问题，请将其标记为已接受。

// Your application has indicated there's an error
window.setTimeout(function(){
// Move to a new location or you can do something else
var url = "http://www.gaelscalpaesthetics.com/accueil";    
$(location).attr('href',url);
}, 4000);