<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style>
*{
margin: 0;
padding: 0;
border: 0;
outline: 0;
}
div{
width: 100%;
height: 100%;
position: relative;
overflow: hidden;
z-index: 1
}
.div1{
width: 100%;
height: 100%;
position: absolute;
overflow: hidden;
z-index: 2
right: -100%;
animation: naezd 3s;
background-color: red;
top:0;
}
@keyframes naezd {
0% {right: -100%;}
100% {right: 0;}
}
</style>
</head>
<body>
<div>
<div class="div1"></div>
</div>
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> -->
<script>
</script>
</body>
</html>
Если я правильно понял