css - 翻译不工作

Question

我正在使用 CSS3 动画，但我无法让“翻译 Y”工作!在下面的代码中，不透明度动画和其他一切都工作正常，所以我知道动画正在被触发。但由于某种原因，translateY 不会发生。我试过使用“text-transform”而不只是“transform”，我也试过写“-webkit-transform”。我还尝试在坐标中使用 0，所以它会是“translateY(0,10px)” 现在，我只是在 Chrome 中工作。

这里有什么可疑的东西吗？如果有人有任何想法，我将不胜感激!这是 CSS:

    .contulmenufirst{
   -webkit-animation: contulmenu 2.5s;
   -webkit-animation-fill-mode: forwards;
   }

   @-webkit-keyframes contulmenu{
    0%{
    opacity:0;          
    }

   25%{
    transform:translateY(10px);
    }

   50%{
    transform:translateY(20px);
     }
    75%{
    transform:translateY(50px);
    }
    100%{
    opacity:1;
    }
    }

Answer 1

我不确定为什么它不起作用，我将您的 tanslateY 放入 fiddle 中，它按预期工作，也许是我没有发现的语法错误？

这是 fiddle https://jsfiddle.net/avocyf33/13/

 div {
    width: 100px;
    height: 100px;

    border-color: red;
    border-style: solid;
    position :relative;
    -webkit-animation: mymove 5s infinite;
    animation: mymove 5s infinite;
}
@-webkit-keyframes mymove {
   0%{opacity:0;}
   25%{transform:translateY(10px);}
   50%{transform:translateY(20px);}
   75%{transform:translateY(50px);}
   100%{opacity:1;}
}