@keyframe 不适用于 mozilla

Question

我想帮助解决我可能遗漏的问题。我读到 @keyframe 还不稳定，但我已经看到 @keyframe 在 mozilla 浏览器的其他站点上使用。当使用关键帧将元素悬停在上方时，我试图让我的背景图像简单地从左向右滑动。

注意：请运行在 mozilla 中查看我的问题。

 .page-content-wrap {
        padding: 0;
    }

main {
        width: 100%;
        margin: 0 auto;
    }

    main img {
        width: 33%;
        border-radius: 100px;
        max-width: 204px;
    }

    .card {
        box-shadow: 0 8px 16px 0 rgba(0, 15, 94, 0.8);
        transition: 0.3s;
        border-radius: 5px;
        width: 100%;
        min-width: 200px;
        height: 150px;
        display: table;
    }

    .review-container {
        display: table-cell;
        width: 100%;
        vertical-align: middle;
        text-align: center;
    }

    blockquote {
       /* margin: 10px;*/
    }

    .even {
        background-color: #3A3A3A;
        /* text-align: right; */
    }

    .odd {
        background-color: black;
    }

         main img {
            /*margin: 15px;*/
            width: auto;
        }

        main a:hover {
            /*background-color: rgba(255,255,255, 0.5);*/
            border-radius: 10px;
            transition: 0.5s;
            color: #639811;
        }

        .customer-review {
            padding: 5px;
            margin: 5%;
            float: right;
        }

        .customer-review h4 {
            width: 200px;
        }

        blockquote {
            text-align: center;
        }

        /* Chrome, Safari, Opera */
        @-webkit-keyframes right-slide {
            from {background-position-x: left;}
            to {background-position-x: right;}
        }

        @-moz-keyframes right-slide {
            from {background-position-x: left;}
            to {background-position-x: right;}
        }

        /* Standard syntax */
        @keyframes right-slide {
            from {background-position-x: left;}
            to {background-position-x: right;}
        }

        /* Chrome, Safari, Opera */
        @-webkit-keyframes left-slide {
            from {background-position-x: right;}
            to {background-position-x: left;}
        }

        @-moz-keyframes left-slide {
            from {background-position-x: right;}
            to {background-position-x: left;}
        }

        /* Standard syntax */
        @keyframes left-slide {
            from {background-position-x: right;}
            to {background-position-x: left;}
        }

        .card:hover {
            box-shadow: 0 15px 100px 15px rgba(0, 0, 0, 1);
        }

        .customer-review:hover {
            background-color: rgba(0,0,0,0.8);
            border-radius: 5px;
            transition: 0.5s;
        }

        .twitter-review:hover {
            background: url(http://stores.inksoft.com/images/publishers/5334/stores/Ozier_Apparel/f830cd82-e59c-4ab0-bbf4-497b9d8ef175.png) no-repeat #00ACED;
            background-size: contain;
            -webkit-animation-duration: 0.5s; /* Chrome, Safari, Opera */
            animation-duration: 0.5s;
            color: white;
        }

        .facebook-card:hover {
            background: url(http://stores.inksoft.com/images/publishers/5334/stores/Ozier_Apparel/04c88185-b51d-46b3-a68c-b08bfd1e4922.png) no-repeat #3B5998;
            background-size: contain;
            -webkit-animation-duration: 0.5s; /* Chrome, Safari, Opera */
            animation-duration: 0.5s;
            color: white;
        }

        .instagram-review:hover {
            background: url(http://stores.inksoft.com/images/publishers/5334/stores/Ozier_Apparel/22a66259-53bf-4ddb-83a4-7e31d27b4728.png) no-repeat #E4405F;
            background-size: contain;
            -webkit-animation-duration: 0.5s; /* Chrome, Safari, Opera */
            -moz-animation-duration: 0.5s;
            animation-duration: 0.5s;
            color: white;
        }
        .even:hover {
            -webkit-animation-name: left-slide; /* Chrome, Safari, Opera */
            animation-name: left-slide;
            background-position-x: left;
        }

        .odd:hover {
            -webkit-animation-name: right-slide; /* Chrome, Safari, Opera */
            -moz-animation-name: right-slide;
            animation-name: right-slide;
            background-position-x: right;
        }


        .card img {
            height:200px
        }

        .float-right {
            float: right;
        }


        .card {
            height:150px;
        }

        .customer-review {
            padding: 5px;
            height: auto;
        }

<main>
  <a href="#">
    <div class="card facebook-card odd" >
      <div class="review-container">
        <img class="float-left" src="http://stores.inksoft.com/images/publishers/5334/stores/Ozier_Apparel/5541016a-a570-404f-a28a-f13a4eb68708.jpg" alt="Facebook User">
        <div class="customer-review">
          <h4><b>Facebook User</b></h4>
          <blockquote>
            Here is where the facebook user's rating story would go. I'm just making this unnecessarily long becuase I may have a little OCD :).
          </blockquote>
        </div>
      </div>
    </div>
  </a>
  <a href="#">
    <div class="card twitter-review even">
      <div class="review-container">
        <img class="float-left" src="http://stores.inksoft.com/images/publishers/5334/stores/Ozier_Apparel/35a6c672-b791-44d7-aae4-93e82e8c4ac4.jpg" alt="Twitter User">
        <div class="customer-review">
          <h4><b>Twitter User</b></h4>
          <blockquote>
            Here is where the twitter user's rating story would go. I'm just making this unnecessarily long becuase I may have a little OCD :).
          </blockquote>
        </div>
      </div>
    </div>
  </a>
  <a href="#">
    <div class="card instagram-review odd">
      <div class="review-container">
        <img class="float-right" src="http://stores.inksoft.com/images/publishers/5334/stores/Ozier_Apparel/2434f0a4-306d-48a0-8803-2489c4976ab0.jpg" alt="Instagram User">
        <div class="customer-review">
          <h4><b>Instagram User</b></h4>
          <blockquote>
            Here is where the instagram user's rating story would go. I'm just making this unnecessarily long becuase I may have a little OCD :).
          </blockquote>
        </div>
      </div>
    </div>
  </a>
</main>

Answer 1

关键帧可以安全使用。不知道你在哪里读到它还不安全。不支持IE8，但支持其他浏览器you are fine.

问题好像是background-position-x，与background-position的水平值不相同。 Read more here. background-position-x is not widely supported yet. In Firefox it's only supported by version 49, which will ship in September。这就解释了这个问题。要解决它，只需使用广泛的老式属性 background-position.

提示：根据您的浏览器支持需求，可能不需要为动画添加浏览器前缀。它得到了很好的支持。

.page-content-wrap {
  padding: 0;
}
main {
  width: 100%;
  margin: 0 auto;
}
main img {
  width: 33%;
  border-radius: 100px;
  max-width: 204px;
}
.card {
  box-shadow: 0 8px 16px 0 rgba(0, 15, 94, 0.8);
  transition: 0.3s;
  border-radius: 5px;
  width: 100%;
  min-width: 200px;
  height: 150px;
  display: table;
}
.review-container {
  display: table-cell;
  width: 100%;
  vertical-align: middle;
  text-align: center;
}
blockquote {
  /* margin: 10px;*/
}
.even {
  background-color: #3A3A3A;
  /* text-align: right; */
}
.odd {
  background-color: black;
}
main img {
  /*margin: 15px;*/
  width: auto;
}
main a:hover {
  /*background-color: rgba(255,255,255, 0.5);*/
  border-radius: 10px;
  transition: 0.5s;
  color: #639811;
}
.customer-review {
  padding: 5px;
  margin: 5%;
  float: right;
}
.customer-review h4 {
  width: 200px;
}
blockquote {
  text-align: center;
}
/* Chrome, Safari, Opera */

@-webkit-keyframes right-slide {
  from {
    background-position: left;
  }
  to {
    background-position: right;
  }
}
@-moz-keyframes right-slide {
  from {
    background-position: left;
  }
  to {
    background-position: right;
  }
}
/* Standard syntax */

@keyframes right-slide {
  from {
    background-position: left;
  }
  to {
    background-position: right;
  }
}
/* Chrome, Safari, Opera */

@-webkit-keyframes left-slide {
  from {
    background-position: right;
  }
  to {
    background-position: left;
  }
}
@-moz-keyframes left-slide {
  from {
    background-position: right;
  }
  to {
    background-position: left;
  }
}
/* Standard syntax */

@keyframes left-slide {
  from {
    background-position: right;
  }
  to {
    background-position: left;
  }
}
.card:hover {
  box-shadow: 0 15px 100px 15px rgba(0, 0, 0, 1);
}
.customer-review:hover {
  background-color: rgba(0, 0, 0, 0.8);
  border-radius: 5px;
  transition: 0.5s;
}
.twitter-review:hover {
  background: url(http://stores.inksoft.com/images/publishers/5334/stores/Ozier_Apparel/f830cd82-e59c-4ab0-bbf4-497b9d8ef175.png) no-repeat #00ACED;
  background-size: contain;
  -webkit-animation-duration: 0.5s;
  /* Chrome, Safari, Opera */
  animation-duration: 0.5s;
  color: white;
}
.facebook-card:hover {
  background: url(http://stores.inksoft.com/images/publishers/5334/stores/Ozier_Apparel/04c88185-b51d-46b3-a68c-b08bfd1e4922.png) no-repeat #3B5998;
  background-size: contain;
  -webkit-animation-duration: 0.5s;
  /* Chrome, Safari, Opera */
  animation-duration: 0.5s;
  color: white;
}
.instagram-review:hover {
  background: url(http://stores.inksoft.com/images/publishers/5334/stores/Ozier_Apparel/22a66259-53bf-4ddb-83a4-7e31d27b4728.png) no-repeat #E4405F;
  background-size: contain;
  -webkit-animation-duration: 0.5s;
  /* Chrome, Safari, Opera */
  -moz-animation-duration: 0.5s;
  animation-duration: 0.5s;
  color: white;
}
.even:hover {
  -webkit-animation-name: left-slide;
  /* Chrome, Safari, Opera */
  animation-name: left-slide;
  background-position: left;
}
.odd:hover {
  -webkit-animation-name: right-slide;
  /* Chrome, Safari, Opera */
  -moz-animation-name: right-slide;
  animation-name: right-slide;
  background-position: right;
}
.card img {
  height: 200px
}
.float-right {
  float: right;
}
.card {
  height: 150px;
}
.customer-review {
  padding: 5px;
  height: auto;
}

<main>
  <a href="#">
    <div class="card facebook-card odd">
      <div class="review-container">
        <img class="float-left" src="http://stores.inksoft.com/images/publishers/5334/stores/Ozier_Apparel/5541016a-a570-404f-a28a-f13a4eb68708.jpg" alt="Facebook User">
        <div class="customer-review">
          <h4><b>Facebook User</b></h4>
          <blockquote>
            Here is where the facebook user's rating story would go. I'm just making this unnecessarily long becuase I may have a little OCD :).
          </blockquote>
        </div>
      </div>
    </div>
  </a>
  <a href="#">
    <div class="card twitter-review even">
      <div class="review-container">
        <img class="float-left" src="http://stores.inksoft.com/images/publishers/5334/stores/Ozier_Apparel/35a6c672-b791-44d7-aae4-93e82e8c4ac4.jpg" alt="Twitter User">
        <div class="customer-review">
          <h4><b>Twitter User</b></h4>
          <blockquote>
            Here is where the twitter user's rating story would go. I'm just making this unnecessarily long becuase I may have a little OCD :).
          </blockquote>
        </div>
      </div>
    </div>
  </a>
  <a href="#">
    <div class="card instagram-review odd">
      <div class="review-container">
        <img class="float-right" src="http://stores.inksoft.com/images/publishers/5334/stores/Ozier_Apparel/2434f0a4-306d-48a0-8803-2489c4976ab0.jpg" alt="Instagram User">
        <div class="customer-review">
          <h4><b>Instagram User</b></h4>
          <blockquote>
            Here is where the instagram user's rating story would go. I'm just making this unnecessarily long becuase I may have a little OCD :).
          </blockquote>
        </div>
      </div>
    </div>
  </a>
</main>

@keyframe 不适用于 mozilla

@keyframe does not work with mozilla

html

css

keyframe