#front{
    margin-left:100px;
    margin-right:100px;
    transition:margin-left 1s;
    
    text-align:center;
     
    margin-bottom:-30px;  
  
}

The above code for transition was working before but after some time like 2-3 weeks later it stopped working. I don't know why?

I also have checked in different browsers but the transition is not working.

CodePudding user response：

It works fine when you change the setting for margin-left. See an example below.

#front {
  margin-left: 100px;
  margin-right: 100px;
  transition: margin-left 1s;
  text-align: center;
  margin-bottom: -30px;
}

#front:hover {
  margin-left: 50px;
}

<div id="front">Hello world</div>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

I don't know what result you want, but based on @gerad answer I just modified a bit. Change transition to animation and add keyframes if you want onl oad

#front {
  margin-left: 100px;
  margin-right: 100px;
  animation: margin-left 1s;
  text-align: center;
  margin-bottom: -30px;
}

@keyframes margin-left {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50px);
  }
}

<div id="front">Hello world</div>

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>