为啥我的动画在 Firefox 中不起作用？

Posted 2023-03-06

【中文标题】为啥我的动画在 Firefox 中不起作用？

【英文标题】：Why does my animation not work in Firefox?为什么我的动画在 Firefox 中不起作用？

【发布时间】：2016-08-01 05:38:13

【问题描述】：

我有一些代码可以在 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;

【问题讨论】：

这和php有什么关系？

答案对您有帮助吗？如果是，请考虑将其标记为已接受（单击投票按钮下方的空心刻度线）。

【参考方案1】：

它在 Firefox 中不起作用，原因有两个：

您在 @keyframes 规则中使用旧的 WebKit 特定线性渐变语法。新语法must have the to keyword before the sides（如to top left）。 Firefox 不支持在@keyframes 中声明background-image，这与使用WebKit 的浏览器不同。原因在我的回答here 中有描述。将在0% 框架内应用的background-image 属性移动到基本选择器并仅对background-position 进行动画处理。

.shine-me 
  width: 100%;  /*Make sure the animation is over the whole element*/
  background-image: linear-gradient(to 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;
  background-repeat: no-repeat;
  -webkit-animation: ShineAnimation 5s infinite cubic-bezier(.12, .89, .98, .47);
  animation: ShineAnimation 5s infinite cubic-bezier(.12, .89, .98, .47);

@-webkit-keyframes ShineAnimation 
  from 
    background-position: -250px -250px;
  
  to 
    background-position: 500px 0px;
  

@keyframes ShineAnimation 
  from 
    background-position: -250px -250px;
  
  to 
    background-position: 500px 0px; /* increase the X position as required */
  

p 
  background-color: #c0c0c0;
  padding: 15px;

<p class='shine-me'>Some text</p>

【参考方案2】：

您还需要添加以下 css ：

-moz-animation:ShineAnimation 5s infinite;
    -moz-animation-timing-function: cubic-bezier(.12,.89,.98,.47);	


@-moz-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;
    

【讨论】：

-moz- 从 v16 开始，Firefox 中的动画不需要前缀。您要么使用的是非常旧版本的 FF（或者）在发布答案之前没有进行测试。