I'd like to help on what I may be missing. I read that @keyframe is not yet stable but I've seen @keyframe being used on other sites in the mozilla browser. I am trying to get my back ground image to simply slide from left to right when the element is hovered over using keyframes.
NOTE: Please run this in mozilla to see my problem.
.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>Keyframes is safe to use. No idea where you read that it isn't safe yet. IE8 is not supported, but for other browsers you are fine.
The problem seems to be background-position-x, which is not identical to the horizontal value of 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. That explains the issue. To solve it, simply use the widely, old-school property background-position.
Tip: depending on your browser support needs, it might not be necessary to include browser prefixes for animation. It is very well supported.
.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>