moving div from outside to inside the div and out again in pure css not using keyframe

Question

content1.className = 'start';
window.getComputedStyle(document.getElementById('content1')).opacity;
content1.style.marginLeft = "0px";
content1.className = 'transition1';

.main {
  width: 300px;
  height: 250px;
  top: 0px;
  left: 0px;
  overflow: hidden;
  position: relative;
  background-color: grey;
  cursor: pointer;
}

#content1 {
  background-color: red;
  width: 300px;
  height: 250px;
  top: 0px;
  left: 0px;
  margin-left: -300px;
}

.start {
  opacity: 0
}

.transition1 {
  opacity: 1;
  visibility: hidden;
  /*margin-left: -300px !important;*/
  -webkit-transition: margin-left 1.5s ease 1.5s, margin-left 1.5s ease 1.5s, visibility 1.5s ease 1.5s
}

<div id="main" class="main">

  <div id="content1" class="content1 hidden">

  </div>
</div>

I want the red div to start from outside and go into the grey div slowly then after a few seconds it would go out slowly again. I tried using transition but it seems to now work.

My guess is timing is wrong?

UPDATE

I have the above now What I lack is the timing to show the red div then go out again to left. I have set a visibility but I think there is a way to just use margins?

Answer 1

If you're wanting to do this without keyframes, then I have two ideas.

First idea is to add the transition css property to the actual #content1 element. Because as you're removing the .transition1 class, you're taking away the transition details.

If that doesn't work, then you might need to break this into 4 different "states".

That is:

1. Start State: Red div starts unseen
2. Start-to-End Transition State: .transition1 class gets added
3. End State: A class is added to ensure that the red div has the same margin from the .transition1 even after the .transition1 class gets taken away.
4. End-to-State Transition State: Essentially do the opposite of what you did in the .transition1 class.

EDIT:

Maybe ignore the "4 steps" because I likely was overthinking what you were asking.

I'm not 100% sure why you wouldn't want a keyframe, but I've added a few options you can reference depending on your overall use case. Each of these rely on some sort of trigger or event. In my case, a click. But this can be determined by any sort of event.

var main2 = document.getElementById('main2');
var content2 = document.getElementById('content2');

main2.addEventListener('click', function() {
  content2.classList.toggle('active');
});


var main4 = document.getElementById('main4');
var content4 = document.getElementById('content4');

main4.addEventListener('click', function() {
  content4.classList.add('animate');
  setTimeout(function() {
    content4.classList.remove('animate');
  }, 1500)
});

.main {
  width: 300px;
  height: 250px;
  position: relative;
  background-color: grey;
  cursor: pointer;
  overflow: hidden;
}

#content1 {
  position: absolute;
  background-color: red;
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
  transform: translate(-100%, 0);
  -webkit-transition: transform 1.5s ease;
}

.main:hover #content1 {
  transform: translate(0, 0);
}


/* Toggle Option */

#content2 {
  position: absolute;
  background-color: red;
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
  transform: translate(-100%, 0);
  -webkit-transition: transform 1.5s ease;
}

#content2.active {
  transform: translate(0, 0);
}


/* SetTimeout Option */

#content4 {
  position: absolute;
  background-color: red;
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
  transform: translate(-100%, 0);
  -webkit-transition: transform 1.5s ease;
}

#content4.animate {
  transform: translate(0, 0);
}

<h2>Hover Option</h2>
<p>Animation happens on hover and disappears after hover</p>
<div class="main">
  <div id="content1">
  </div>
</div>

<h2>Toggle Option</h2>
<p>Animation happens on click and disappears on second click</p>
<div id="main2" class="main">
  <div id="content2">
  </div>
</div>


<h2>SetTimeout Option</h2>
<p>Animation happens on click and disappears after 1 second</p>
<div id="main4" class="main">
  <div id="content4">
  </div>
</div>