тогда так
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style>
*{
margin: 0;
padding: 0;
}
div{
width: 100%;
height: 100%;
position: relative;
overflow: hidden;
}
.div1{
width: 100%;
height: 100%;
position: absolute;
overflow: hidden;
right: -100%;
background-color: red;
transition: 3s;
top:0;
}
.animate{
right: 0;
}
</style>
</head>
<body>
<div id="id">
<div class="div1"></div>
</div>
<script>
document.getElementById('id').onclick = function(){
document.querySelector(".div1").classList.add("animate");
}
</script>
</body>
</html>