CSS 动画踩的坑

CSS动画移动后旋转

如何实现将上面的一横移到中间再旋转呢？
自然而然就想到使用动画先translateY移到，再rotate

@keyframes move1{
    0%{transform: translateY(0px);}
    50%{transform: translateY(20px);}
    100%{transform: rotate(135deg);}
}

但这样是实现不了的，因为下面旋转的原点是在未移动前的原点，而不是往下移动后的原点。
正确的实现方法是在旋转前维持移动的状态。

 @keyframes move1{
     0%{transform: translateY(0px);}
     50%{transform: translateY(20px);}
     100%{transform: translateY(20px) rotate(135deg);
 }