3
Ich würde gerne helfen, was ich vermisse. Ich habe gelesen, dass @keyframe ist noch nicht stabil, aber ich habe gesehen, @keyframe auf anderen Seiten im Mozilla-Browser verwendet wird. Ich versuche, mein Hintergrundbild einfach von links nach rechts zu verschieben, wenn das Element über Keyframes verschoben wird.@keyframe funktioniert nicht mit mozilla
HINWEIS: Bitte führen Sie dies in Mozilla, um mein Problem zu sehen.
.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>
Dank. Die ganze "instabile Sache" kam von https://developer.mozilla.org/en-US/docs/Web/CSS/@keyframes und sagte: "Dies ist eine experimentelle Technologie Da sich die Spezifikation dieser Technologie nicht stabilisiert hat, überprüfen Sie die Kompatibilitätstabelle für Verwendung in verschiedenen Browsern. Beachten Sie außerdem, dass sich die Syntax und das Verhalten einer experimentellen Technologie in zukünftigen Versionen von Browsern ändern können, wenn sich die Spezifikation ändert. "Aber ich erwähnte gerade, falls es nötig sein sollte. Ich war mir nicht sicher. Wie auch immer, danke für die Erläuterung. –