Question

我已经写了一些脉冲动画，但它不能正常工作。这张图片只在Firefox浏览器中震动。我能做些什么来阻止它？

＆＃13;

.heart::before {
    content: "\f004";
    color: #E98E1B;
}

.pulseHeart {
    -webkit-animation: pulseHeart 1s linear infinite;
    -moz-animation: pulseHeart 1s linear infinite;
    -ms-animation: pulseHeart 1s linear infinite;
    animation: pulseHeart 1s linear infinite;
}

@keyframes "pulseHeart" {
    0% {
        -webkit-transform: scale(1.1);
        -moz-transform: scale(1.1);
        -o-transform: scale(1.1);
        -ms-transform: scale(1.1);
        transform: scale(1.1);
    }
    50% {
        -webkit-transform: scale(0.8);
        -moz-transform: scale(0.8);
        -o-transform: scale(0.8);
        -ms-transform: scale(0.8);
        transform: scale(0.8);
    }
    100% {
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        -o-transform: scale(1);
        -ms-transform: scale(1);
        transform: scale(1);
    }

}

@-moz-keyframes pulseHeart {
    0% {
        -moz-transform: scale(1.1);
        transform: scale(1.1);
    }
    50% {
        -moz-transform: scale(0.8);
        transform: scale(0.8);
    }
    100% {
        -moz-transform: scale(1);
        transform: scale(1);
    }

}

@-webkit-keyframes "pulseHeart" {
    0% {
        -webkit-transform: scale(1.1);
        transform: scale(1.1);
    }
    50% {
        -webkit-transform: scale(0.8);
        transform: scale(0.8);
    }
    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }

}

@-ms-keyframes "pulseHeart" {
    0% {
        -ms-transform: scale(1.1);
        transform: scale(1.1);
    }
    50% {
        -ms-transform: scale(0.8);
        transform: scale(0.8);
    }
    100% {
        -ms-transform: scale(1);
        transform: scale(1);
    }

}

＆＃13;

<!DOCTYPE html>
<html>
  <head>
  <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
  </head>
  <title>page</title>
  <body>
    <span class="fa heart pulseHeart"></span>
  </body>
</html>

＆＃13;

我在Stack上看过一些代码片段，但是他们没有帮助我。

Answer 1

您应为transform属性添加初始值。

.heart::before {
    content: "\f004";
    color: #E98E1B;
}

.pulseHeart {
    -webkit-transform: scale(1); // !!! NEW LINE !!!
    -moz-transform: scale(1); // !!! LINE !!!
    -o-transform: scale(1); // !!! LINE !!!
    -ms-transform: scale(1); // !!! LINE !!!
    transform: scale(1); // !!! LINE !!!
    -webkit-animation: pulseHeart 1s linear infinite;
    -moz-animation: pulseHeart 1s linear infinite;
    -ms-animation: pulseHeart 1s linear infinite;
    animation: pulseHeart 1s linear infinite;
}

@keyframes "pulseHeart" {
    0% {
        -webkit-transform: scale(1.1);
        -moz-transform: scale(1.1);
        -o-transform: scale(1.1);
        -ms-transform: scale(1.1);
        transform: scale(1.1);
    }
    50% {
        -webkit-transform: scale(0.8);
        -moz-transform: scale(0.8);
        -o-transform: scale(0.8);
        -ms-transform: scale(0.8);
        transform: scale(0.8);
    }
    100% {
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        -o-transform: scale(1);
        -ms-transform: scale(1);
        transform: scale(1);
    }

}

@-moz-keyframes pulseHeart {
    0% {
        -moz-transform: scale(1.1);
        transform: scale(1.1);
    }
    50% {
        -moz-transform: scale(0.8);
        transform: scale(0.8);
    }
    100% {
        -moz-transform: scale(1);
        transform: scale(1);
    }

}

@-webkit-keyframes "pulseHeart" {
    0% {
        -webkit-transform: scale(1.1);
        transform: scale(1.1);
    }
    50% {
        -webkit-transform: scale(0.8);
        transform: scale(0.8);
    }
    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }

}

@-ms-keyframes "pulseHeart" {
    0% {
        -ms-transform: scale(1.1);
        transform: scale(1.1);
    }
    50% {
        -ms-transform: scale(0.8);
        transform: scale(0.8);
    }
    100% {
        -ms-transform: scale(1);
        transform: scale(1);
    }

}

<!DOCTYPE html>
<html>
  <head>
  <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
  </head>
  <title>page</title>
  <body>
    <span class="fa heart pulseHeart"></span>
  </body>
</html>

CSS动画在firefox中发抖

1 个答案: