TranslateY（）和TranslateX（）动画在Chrome中运行良好，但在FireFox中运行良好

Question

我创建了一个具有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">

现在所有这些在Chrome中运行得非常好。顺利和一切。但是在FireFox中它非常慢而且矮胖。我真的不确定现在该怎么办？当我开始谷歌搜索时，我看到有人提到KeyFrames？使用此vs trnaslate有什么好处？解决这个问题的最佳方法是什么？