CSS 过渡无效，之前有效

Question

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

上面的转换代码之前可以正常工作，但在 2-3 周后一段时间后它停止工作了。不知道为什么？

我也检查了不同的浏览器，但转换不工作。

Answer 1

当您更改 margin-left 的设置时它工作正常。请参阅下面的示例。

#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>

Answer 2

我不知道你想要什么结果，但是根据@gerad 的回答我只是修改了一下。将 transition 更改为 animation 并添加 keyframes 如果您想要 onload

#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>

CSS 过渡无效，之前有效

CSS transition is not working, it was working before

html

css

css-transitions