animation操作transform:translate3d没有动画效果

最新推荐文章于 2024-03-11 20:13:26 发布

原创最新推荐文章于 2024-03-11 20:13:26 发布 · 3.7k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#animation #bug

前端杂事专栏收录该内容

205 篇文章

订阅专栏

作者在使用CSS @keyframes实现动画效果时遇到问题，原本流畅的动画突然失效。通过检查代码发现，translate3d()函数在参数为0时不能省略，修改后动画恢复正常。

bug

无往不利的animation突然就没有了往日的效果，吓坏我了–

solution

仔细看了看自己写的代码

 @keyframes move {
    0% {
      transform: translate3d(0,-8px);
    }
    50% {
      transform: translate3d(0,8px);
    }
    100% {
      transform: translate3d(0,-8px);
    }
  }

流下了基础不牢的泪水–我以为translate3d和translate一样可以把参数为0的可以省略不写…

 @keyframes move {
    0% {
      transform: translate3d(0,-8px,0);
    }
    50% {
      transform: translate3d(0,8px,0);
    }
    100% {
      transform: translate3d(0,-8px,0);
    }
  }