@keyframe不适用于mozilla

我想帮助我可能会丢失的东西。我读@keyframe尚不稳定，但我看到@keyframe在mozilla浏览器中的其他网站上使用。我试图让我的背景图像简单地从左向右滑动，当元素使用关键帧悬停时。@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>

来源

2016-09-06 Dez Moni

关键帧是安全使用。不知道你读到哪里不安全。 IE8不支持，但用于其他浏览器you are fine。

问题似乎是background-position-x，这是不是相同的背景位置的水平值。 Read more here.background-position-x尚未得到广泛支持。在Firefox中，它只支持49版本，这将是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>

来源

2016-09-06 16:41:20

感谢。整个“不稳定的东西来自https://developer.mozilla.org/en-US/docs/Web/CSS/@keyframes说：”这是一个实验性技术由于该技术的规格不稳定，请检查兼容性表在各种浏览器中的使用。另外请注意，随着规范的变化，实验技术的语法和行为在未来版本的浏览器中可能会发生变化，“但我刚刚提到，以防万一需要它，不过我还是不确定。说明。 –

@keyframe不适用于mozilla

回答

相关问题