Question

我正在使用CSS3动画，我无法理解＆＃34;翻译Y＆＃34;上班！在下面的代码中，不透明度动画和其他一切工作正常，所以我知道动画正在被触发。但由于某种原因，翻译不会发生。我尝试过使用＆＃34; text-transform＆＃34;而不只是＆＃34;转换＆＃34;，我也尝试过编写＆＃34; -webkit-transform＆＃34;。我也尝试在坐标中使用0，因此它将是＆＃34; translateY（0,10px）＆＃34;现在，我只是在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放到一个小提琴中，它按预期工作，也许是一个语法错误，我没有抓到？

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

translateY无效

1 个答案: