Search code examples
csstransitionpageload

Transition on page re-visit

I have a simple transform & transition on a div element. However, it doesn't appear to be working on page loads/re-visits. Really appreciate if I could be directed to a possible solution.

.container {
    width: 50%;
    text-align: center;
    background: #ccff44;
    padding: 50px 5px;
    border: #000 2px solid;
    margin: auto;
    transform: translate3D(-50px, 0, 0);
    transition: all 2s ease-in;    
}
<div class="container">
  <p>Main paragraph</p>
</div>

Solution

  • Hello I think what you are looking for is an animation

    the transition will not trigger any movement on its own

    @keyframes enter {
  from {
    transform: translateX(-50px);
  }
  to {
    transform: translateX(0px);
  }
}
.container {
  width: 50%;
  text-align: center;
  background: #ccff44;
  padding: 50px 5px;
  border: #000 2px solid;
  margin: auto;
  animation: enter 2s linear;
}
        <div class="container">
      <p>Main paragraph</p>
    </div>