У меня есть код, который отлично работает в Chrome, но не работает в Firefox. Я хочу, чтобы мой логотип отображался на моем веб-сайте. Код работает в Chrome, но я не знаю, почему он не работает в Firefox.
.shine-me {
width:100%; /*Make sure the animation is over the whole element*/
-webkit-animation-name: ShineAnimation;
-webkit-animation-duration: 5s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: cubic-bezier(.12,.89,.98,.47);
animation:ShineAnimation 5s infinite;
animation-timing-function: cubic-bezier(.12,.89,.98,.47);
}
@-webkit-keyframes ShineAnimation{
from {
background-repeat:no-repeat;
background-image:-webkit-linear-gradient(
top left,
rgba(255, 255, 255, 0.0) 0%,
rgba(255, 255, 255, 0.0) 45%,
rgba(255, 255, 255, 0.5) 48%,
rgba(255, 255, 255, 0.8) 50%,
rgba(255, 255, 255, 0.5) 52%,
rgba(255, 255, 255, 0.0) 57%,
rgba(255, 255, 255, 0.0) 100%
);
background-position:-250px -250px;
background-size: 600px 600px
}
to {
background-repeat:no-repeat;
background-position:250px 250px;
}
}
@keyframes ShineAnimation{
from {
background-repeat:no-repeat;
background-image:linear-gradient(
top left,
rgba(255, 255, 255, 0.0) 0%,
rgba(255, 255, 255, 0.0) 45%,
rgba(255, 255, 255, 0.5) 48%,
rgba(255, 255, 255, 0.8) 50%,
rgba(255, 255, 255, 0.5) 52%,
rgba(255, 255, 255, 0.0) 57%,
rgba(255, 255, 255, 0.0) 100%
);
background-position:-250px -250px;
background-size: 600px 600px
}
to {
background-repeat:no-repeat;
background-position:250px 250px;
}
}
p
{
background-color:#c0c0c0;
padding:15px;
}