3
私が紛失している可能性があるものについてお手伝いしたいと思います。私はそれを読む@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>
感謝。 「不安定なことは、https://developer.mozilla.org/en-US/docs/Web/CSS/@keyframesから「これは実験的な技術です」 この技術の仕様は安定していないため、さまざまなブラウザでの使用。実験的な技術の構文と動作は、仕様の変更に伴い将来のバージョンのブラウザで変更される可能性があります」説明。 –