1. Accueil
  2. Question et réponse
  3. @keyframe ne fonctionne pas avec mozilla

@keyframe ne fonctionne pas avec mozilla

2016-09-06 2 views
3

Je voudrais aider sur ce que je peux manquer. J'ai lu que @keyframe n'est pas encore stable mais j'ai vu @keyframe étant utilisé sur d'autres sites dans le navigateur mozilla. J'essaie de faire en sorte que mon image de fond soit simplement déplacée de gauche à droite lorsque l'élément est survolé à l'aide d'images clés.@keyframe ne fonctionne pas avec mozilla

REMARQUE: Veuillez l'exécuter dans mozilla pour voir mon problème.

.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>

Source

2016-09-06 Dez Moni

Répondre

3

est images clés sûr à utiliser. Aucune idée où vous avez lu que ce n'est pas encore sûr. IE8 n'est pas pris en charge, mais pour les autres navigateurs you are fine.

Le problème semble être background-position-x, qui est et non identique à la valeur horizontale de la position de fond. Read more here.background-position-x n'est pas encore largement supporté. Dans Firefox, il est uniquement pris en charge par la version 49, qui sera ship in September. Cela explique le problème. Pour le résoudre, il suffit d'utiliser la propriété largement, ancienne école background-position. Conseil: en fonction des besoins de votre navigateur, il peut ne pas être nécessaire d'inclure des préfixes de navigateur pour l'animation. C'est très bien supporté.

.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>

Source

2016-09-06 16:41:20

+0

Merci. L'ensemble "chose instable est venu de https://developer.mozilla.org/en-US/docs/Web/CSS/@keyframes dire" Ceci est une technologie expérimentale Parce que la spécification de cette technologie ne s'est pas stabilisée, vérifiez la table de compatibilité pour utilisation dans divers navigateurs. Notez également que la syntaxe et le comportement d'une technologie expérimentale sont susceptibles d'être modifiés dans les futures versions de navigateurs au fur et à mesure que la spécification évolue. "Mais je viens juste de le mentionner au cas où cela serait nécessaire, mais je n'étais pas sûr. explication. –

 Questions connexes

  • Aucun problème connexe^_^