如何在CSS转换中使用CSS过渡

Question

 .circular-menu.active .menu-item:nth-child(4) {
     transform: translate3d(-7em,1em,0);
     transition: ease;
          }

我为带有标签的菜单项获取了此代码。变换效果有效，但过渡效果无效。

Answer 1

您需要设置过渡的持续时间，否则默认为0。试试这个

.circular-menu.active .menu-item:nth-child(4) {
     transform: translate3d(-7em,1em,0);
     transition: all 0.3s ease;
 }

它将在300毫秒的时间内为您更改的所有效果制作动画