翻译不工作答案

【问题标题】：translateY not working翻译不工作
【发布时间】：2015-08-12 15:11:39
【问题描述】：

我正在使用 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;
    }
    }

【问题讨论】：

晚了 2 年，但我刚刚遇到了同样的问题。我遇到的问题是我已将 div 更改为 span，并且 transform 似乎仅适用于 display: block，以防其他人看到此页面（这是 Google 结果中的第一个，grr）。

标签： css css-animations

【解决方案1】：

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

这是小提琴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;}
}

【讨论】：