body{
overflow-x: hidden;
margin: 0;
}
.element {
height: 70px;
width: 270px;
border-radius: 15px;
margin-top: 10px;
background-color: red;
transform: translateX(-100%);
animation: nudge 5s linear;
}
.element:nth-child(2){
-webkit-animation-delay: 5s;
-moz-animation-delay: 5s;
-o-animation-delay: 5s;
animation-delay: 5s;
}
.element:nth-child(3){
-webkit-animation-delay: 10s;
-moz-animation-delay: 10s;
-o-animation-delay: 10s;
animation-delay: 10s;
}
@keyframes nudge {
100% { transform: translateX(100vw); }
}
<style>
в head или body, а то у Вас где-то между<div class="wrapper">
<div class="left-block">
1
</div>
<div class="right-block">
2
</div>
</div>
*{
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
margin:0;
padding:0;
}
.wrapper{
display: table;
width: 100%;
min-height:100vh;
height:100%;
}
.left-block,.right-block{
display: inline-block;
min-height:100%;
}
.left-block{width: 68%;background:green;}
.right-block{width: 32%;background:red;}