如何在变换属性缩放，变换，旋转等方面对延迟进行不同的延迟

Question

这是不正确的方式，我知道它，它不再工作，它只是为了解我的问题。

div
{
    transform: rotate(0deg) translate(0);
    transition:rotate 0.2s linear, translate 0.3s linear 0.2s;
}
div:hover
{
    transform: rotate(60deg) translate(40);
}

Answer 1

根据css3标准，不可能达到你提到的相同标准。相反，你可以做这样的事情。

<div class="outer">
 <div class="inner">
 </div>
</div>



.outer
{
  height:30px;
  width:30px;
  transform:translateX(0);
  transition:transform 2s linear;
}
.inner{
   width: inherit; height: inherit;
  transform: rotate(0deg);
   transition:transform 2s linear;
   background:blue
}
.outer:hover
{
  transform: translateX(140px);  
}
.outer:hover .inner
{
   transform: rotate(160deg);

}