After transforming 2 div tags into blocks, I created a code that causes the blocks to move outwards. The issue I'm facing is that they return to their original position after moving. I want the two blocks in the animation to move out to the sides and stay there without returning to the center.
:)
.dark1 {
background-color: black;
height: 100vh;
position: absolute;
left: 0px;
top: 0px;
width: 50%;
animation: example1 5s;
}
.dark2 {
background-color: red;
height: 100vh;
position: absolute;
top: 0px;
right: 0px;
width: 50%;
animation: example 5s;
}
@keyframes example {
50% {
right: -500px;
top: 0px;
}
}
@keyframes example1 {
50% {
left: -500px;
top: 0px;
}
}<!DOCTYPE html>
<html>
<body>
<div class="dark1"></div>
<div class="dark2"></div>
</body>
</html>