html - left 的 transition 属性不提供平滑动画

Question

为什么 left 的转换属性在我的情况下不起作用。我无法识别我的错误，动画根本没有过渡。我在课堂上使用了这种过渡，.Kakashi并且.insideleftthree.

代码笔： https ://codepen.io/aronnora/pen/abOrwbE

HTML

<div class="main">
      <div class="left">
        <div class="insideleftone"></div>
        <div class="insidelefttwo"></div>
        <img src="Kakashi.jpg" class="Kakashi" alt="Kakashi"></img>
        <div class="insideleftthree"></div>
    </div>
      <div class="right"></div>
    </div>

CSS

.insideleftthree{
  background-color: pink;
  position:relative;
  width:50%;
  height:22.5rem;
  transition: left 1s, opacity 1s;
  opacity : 0.5;
}

.insideleftthree:hover{
  left:50%;
  opacity:1;
}

标签： htmlcss