关键帧在 Firefox 中不起作用

Question

我使用关键帧来对每 15 秒产生一个加号效果的文本产生加号效果，这在 chrome 中有效，但在 Firefox 中无效。 我不知道如何在每个脉冲效果之间延迟 15 秒，所以我尝试在工作中使用更多百分比，我不知道它是否真实

@-webkit-keyframes pulse_animation {
0% { -webkit-transform: scale(1); }
3% { -webkit-transform: scale(1); }
4% { -webkit-transform: scale(1); }
6% { -webkit-transform: scale(1.08); }
8% { -webkit-transform: scale(1); }
10% { -webkit-transform: scale(1); }
12% { -webkit-transform: scale(1); }
14% { -webkit-transform: scale(1); }
16% { -webkit-transform: scale(1); }
18% { -webkit-transform: scale(1); }
20% { -webkit-transform: scale(1); }
22% { -webkit-transform: scale(1); }
24% { -webkit-transform: scale(1); }
26% { -webkit-transform: scale(1); }
28% { -webkit-transform: scale(1); }
30% { -webkit-transform: scale(1); }
32% { -webkit-transform: scale(1); }
34% { -webkit-transform: scale(1); }
36% { -webkit-transform: scale(1); }
38% { -webkit-transform: scale(1); }
40% { -webkit-transform: scale(1); }
42% { -webkit-transform: scale(1); }
44% { -webkit-transform: scale(1); }
46% { -webkit-transform: scale(1); }
48% { -webkit-transform: scale(1); }
50% { -webkit-transform: scale(1); }
52% { -webkit-transform: scale(1); }
54% { -webkit-transform: scale(1); }
56% { -webkit-transform: scale(1); }
58% { -webkit-transform: scale(1); }
60% { -webkit-transform: scale(1); }
62% { -webkit-transform: scale(1); }
64% { -webkit-transform: scale(1); }
66% { -webkit-transform: scale(1); }
68% { -webkit-transform: scale(1); }
70% { -webkit-transform: scale(1); }
72% { -webkit-transform: scale(1); }
74% { -webkit-transform: scale(1); }
76% { -webkit-transform: scale(1); }
78% { -webkit-transform: scale(1); }
80% { -webkit-transform: scale(1); }
82% { -webkit-transform: scale(1); }
84% { -webkit-transform: scale(1); }
86% { -webkit-transform: scale(1); }
88% { -webkit-transform: scale(1); }
90% { -webkit-transform: scale(1); }
92% { -webkit-transform: scale(1); }
94% { -webkit-transform: scale(1); }
96% { -webkit-transform: scale(1); }
98% { -webkit-transform: scale(1); }
100% { -webkit-transform: scale(1); }

}

@-moz-keyframes pulse_animation {
0% { -moz-transform: scale(1); }
3% { -moz-transform: scale(1); }
4% { -moz-transform: scale(1); }
6% { -moz-transform: scale(1.08); }
8% { -moz-transform: scale(1); }
10% { -moz-transform: scale(1); }
12% { -moz-transform: scale(1); }
14% { -moz-transform: scale(1); }
16% { -moz-transform: scale(1); }
18% { -moz-transform: scale(1); }
20% { -moz-transform: scale(1); }
22% { -moz-transform: scale(1); }
24% { -moz-transform: scale(1); }
26% { -moz-transform: scale(1); }
28% { -moz-transform: scale(1); }
30% { -moz-transform: scale(1); }
32% { -moz-transform: scale(1); }
34% { -moz-transform: scale(1); }
36% { -moz-transform: scale(1); }
38% { -moz-transform: scale(1); }
40% { -moz-transform: scale(1); }
42% { -moz-transform: scale(1); }
44% { -moz-transform: scale(1); }
46% { -moz-transform: scale(1); }
48% { -moz-transform: scale(1); }
50% { -moz-transform: scale(1); }
52% { -moz-transform: scale(1); }
54% { -moz-transform: scale(1); }
56% { -moz-transform: scale(1); }
58% { -moz-transform: scale(1); }
60% { -moz-transform: scale(1); }
62% { -moz-transform: scale(1); }
64% { -moz-transform: scale(1); }
66% { -moz-transform: scale(1); }
68% { -moz-transform: scale(1); }
70% { -moz-transform: scale(1); }
72% { -moz-transform: scale(1); }
74% { -moz-transform: scale(1); }
76% { -moz-transform: scale(1); }
78% { -moz-transform: scale(1); }
80% { -moz-transform: scale(1); }
82% { -moz-transform: scale(1); }
84% { -moz-transform: scale(1); }
86% { -moz-transform: scale(1); }
88% { -moz-transform: scale(1); }
90% { -moz-transform: scale(1); }
92% { -moz-transform: scale(1); }
94% { -moz-transform: scale(1); }
96% { -moz-transform: scale(1); }
98% { -moz-transform: scale(1); }
100% { -moz-transform: scale(1); }

}

@keyframes pulse_animation {
0% { transform: scale(1); }
3% { transform: scale(1); }
4% { transform: scale(1); }
6% { transform: scale(1.08); }
8% { transform: scale(1); }
10% { transform: scale(1); }
12% { transform: scale(1); }
14% { transform: scale(1); }
16% { transform: scale(1); }
18% { transform: scale(1); }
20% { transform: scale(1); }
22% { transform: scale(1); }
24% { transform: scale(1); }
26% { transform: scale(1); }
28% { transform: scale(1); }
30% { transform: scale(1); }
32% { transform: scale(1); }
34% { transform: scale(1); }
36% { transform: scale(1); }
38% { transform: scale(1); }
40% { transform: scale(1); }
42% { transform: scale(1); }
44% { transform: scale(1); }
46% { transform: scale(1); }
48% { transform: scale(1); }
50% { transform: scale(1); }
52% { transform: scale(1); }
54% { transform: scale(1); }
56% { transform: scale(1); }
58% { transform: scale(1); }
60% { transform: scale(1); }
62% { transform: scale(1); }
64% { transform: scale(1); }
66% { transform: scale(1); }
68% { transform: scale(1); }
70% { transform: scale(1); }
72% { transform: scale(1); }
74% { transform: scale(1); }
76% { transform: scale(1); }
78% { transform: scale(1); }
80% { transform: scale(1); }
82% { transform: scale(1); }
84% { transform: scale(1); }
86% { transform: scale(1); }
88% { transform: scale(1); }
90% { transform: scale(1); }
92% { transform: scale(1); }
94% { transform: scale(1); }
96% { transform: scale(1); }
98% { transform: scale(1); }
100% { transform: scale(1); }

}

.first-visit{
-webkit-animation-name: 'pulse_animation';
-webkit-animation-duration: 18000ms;
-webkit-transform-origin:40% 40%;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-webkit-animation-delay: 2s;


-moz-animation-name: 'pulse_animation';
-moz-animation-duration: 18000ms;
-moz-transform-origin:40% 40%;
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: linear;
-moz-animation-delay: 2s;



animation-name: 'pulse_animation';
animation-duration: 18000ms;
transform-origin:40% 40%;
animation-iteration-count: infinite;
animation-timing-function: linear;

}

Answer 1

使用

-moz-animation-name: pulse_animation;

而不是

-moz-animation-name: 'pulse_animation';

动画名称是一个标识符，而不是一个字符串，因此不应该用引号引起来。