Css TranslateY（）和TranslateX（）动画在Chrome中运行良好，但在FireFox中则不起作用

我制作了一个具有CSS动画的应用程序，如下所示：

.hand
{
  position:fixed;
  top:-60%;
  left:50%;
  width:20%;
  margin-left:-10%;
}

.handmovedown
{
  transform: translateY(110%);
  -webkit-transform: translateY(110%); /** Safari & Chrome **/
  -o-transform: translateY(110%); /** Opera **/
  -moz-transform: translateY(110%); /** Firefox **/
}

.objecttransition
{
    transition: all 0.5s linear;
    -webkit-transition: all 0.5s linear; /** Chrome & Safari **/
    -moz-transition: all 0.5s linear; /** Firefox **/
    -o-transition: all 0.5s linear; /** Opera **/
}

<img  id='Hand'  class="hand objecttransition"  src="css/images/hand.gif">

.hand
{
位置：固定；
前-60%；
左：50%；
宽度：20%；
左边缘：-10%；
}
.手动向下移动
{
转化：translateY（110%）；
-webkit转换：translateY（110%）；/**Safari和Chrome**/
-o-变换：translateY（110%）；/**Opera**/
-moz变换：translateY（110%）；/**Firefox**/
}
.objecttransition
{
过渡：所有0.5s线性；
-webkit过渡：所有0.5s线性；/**Chrome和Safari**/
-moz过渡：所有0.5s线性；/**Firefox**/
-o型过渡：所有0.5s线性；/**Opera**/
}

现在所有这些都在Chrome中运行得非常好。一切顺利。但在FireFox中，它的速度很慢，而且很笨重。我真的不知道现在该怎么办？当我开始谷歌搜索时，我看到人们提到关键帧？使用此vs trnaslate的好处是什么？处理这个问题的最好方法是什么