动画：在{content：＆＃34;＆＃34;}之后使用@keyframes

Question

我创建了这个倒计时，它在Chrome上完美运行。问题出在其他浏览器上，我无法通过以下方式使用它：

Firefox：数字CSS内容属性不是动画的 IE11：没有任何作用

CodePen用于编辑/可视化

是否有跨浏览器方式使用@keyframes可靠的伪元素的内容属性设置动画？如果没有，您能想到另一种仅用于CSS的倒计时方式吗？另外，IE11不应该支持SVG笔画动画吗？

以下是Sass编译为CSS的完整演示：

＆＃13;

＆＃13;

@import url("https://fonts.googleapis.com/css?family=Roboto+Mono");
/*
 * Max value is 5940 seconds
 * ( 99 minutes )
 */
.container {
  position: relative;
  height: 400px;
  width: 400px;
  background-color: #abdddb;
}

svg {
  position: absolute;
  width: 100%;
  height: 100%;
}
svg .circle {
  fill: none;
  stroke: #29bdc0;
  stroke-width: 20px;
  stroke-dasharray: 650;
  stroke-dashoffset: 650;
  animation: circle 121s 0s linear forwards;
  -o-animation: circle 121s 0s linear forwards;
  -moz-animation: circle 121s 0s linear forwards;
  -webkit-animation: circle 121s 0s linear forwards;
}
svg .circle.shadow {
  position: absolute;
  top: 2px;
  stroke: #000;
  opacity: 0.2;
  -webkit-transform: translateY(2px);
  transform: translateY(2px);
}

.mask {
  overflow: hidden;
  position: absolute;
  width: 155px;
  height: 70px;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
.mask .number {
  display: block;
  width: 155px;
  height: 40px;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  animation: number 0.8s 121.1s ease forwards;
  -o-animation: number 0.8s 121.1s ease forwards;
  -moz-animation: number 0.8s 121.1s ease forwards;
  -webkit-animation: number 0.8s 121.1s ease forwards;
}
.mask p {
  display: block;
  position: absolute;
  text-align: center;
  color: #fff;
  font-family: 'Roboto Mono', monospace;
  font-size: 50px;
  font-weight: bold;
  text-shadow: rgba(0, 0, 0, 0.2) 0 2px;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -40%);
  transform: translate(-50%, -40%);
  animation: done 1s 121.6s ease forwards;
  -o-animation: done 1s 121.6s ease forwards;
  -moz-animation: done 1s 121.6s ease forwards;
  -webkit-animation: done 1s 121.6s ease forwards;
}

/* Initial counter state */
.number:after {
  display: block;
  width: 155px;
  position: absolute;
  text-align: center;
  color: #fff;
  animation: counter 120s 1s linear forwards;
  -o-animation: counter 120s 1s linear forwards;
  -moz-animation: counter 120s 1s linear forwards;
  -webkit-animation: counter 120s 1s linear forwards;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  font-family: 'Roboto Mono', monospace;
  font-size: 50px;
  font-weight: bold;
  text-shadow: rgba(0, 0, 0, 0.2) 0 2px;
  content: "02:00";
}

/* ----- Keyframes ----- */
/* Countdown */
@-webkit-keyframes counter {
  /*119 seconds*/
  0.83333% {
    content: "01:59";
  }
  /*118 seconds*/
  1.66667% {
    content: "01:58";
  }
  /*117 seconds*/
  2.5% {
    content: "01:57";
  }
  /*116 seconds*/
  3.33333% {
    content: "01:56";
  }
  /*115 seconds*/
  4.16667% {
    content: "01:55";
  }
  /*114 seconds*/
  5% {
    content: "01:54";
  }
  /*113 seconds*/
  5.83333% {
    content: "01:53";
  }
  /*112 seconds*/
  6.66667% {
    content: "01:52";
  }
  /*111 seconds*/
  7.5% {
    content: "01:51";
  }
  /*110 seconds*/
  8.33333% {
    content: "01:50";
  }
  /*109 seconds*/
  9.16667% {
    content: "01:49";
  }
  /*108 seconds*/
  10% {
    content: "01:48";
  }
  /*107 seconds*/
  10.83333% {
    content: "01:47";
  }
  /*106 seconds*/
  11.66667% {
    content: "01:46";
  }
  /*105 seconds*/
  12.5% {
    content: "01:45";
  }
  /*104 seconds*/
  13.33333% {
    content: "01:44";
  }
  /*103 seconds*/
  14.16667% {
    content: "01:43";
  }
  /*102 seconds*/
  15% {
    content: "01:42";
  }
  /*101 seconds*/
  15.83333% {
    content: "01:41";
  }
  /*100 seconds*/
  16.66667% {
    content: "01:40";
  }
  /*99 seconds*/
  17.5% {
    content: "01:39";
  }
  /*98 seconds*/
  18.33333% {
    content: "01:38";
  }
  /*97 seconds*/
  19.16667% {
    content: "01:37";
  }
  /*96 seconds*/
  20% {
    content: "01:36";
  }
  /*95 seconds*/
  20.83333% {
    content: "01:35";
  }
  /*94 seconds*/
  21.66667% {
    content: "01:34";
  }
  /*93 seconds*/
  22.5% {
    content: "01:33";
  }
  /*92 seconds*/
  23.33333% {
    content: "01:32";
  }
  /*91 seconds*/
  24.16667% {
    content: "01:31";
  }
  /*90 seconds*/
  25% {
    content: "01:30";
  }
  /*89 seconds*/
  25.83333% {
    content: "01:29";
  }
  /*88 seconds*/
  26.66667% {
    content: "01:28";
  }
  /*87 seconds*/
  27.5% {
    content: "01:27";
  }
  /*86 seconds*/
  28.33333% {
    content: "01:26";
  }
  /*85 seconds*/
  29.16667% {
    content: "01:25";
  }
  /*84 seconds*/
  30% {
    content: "01:24";
  }
  /*83 seconds*/
  30.83333% {
    content: "01:23";
  }
  /*82 seconds*/
  31.66667% {
    content: "01:22";
  }
  /*81 seconds*/
  32.5% {
    content: "01:21";
  }
  /*80 seconds*/
  33.33333% {
    content: "01:20";
  }
  /*79 seconds*/
  34.16667% {
    content: "01:19";
  }
  /*78 seconds*/
  35% {
    content: "01:18";
  }
  /*77 seconds*/
  35.83333% {
    content: "01:17";
  }
  /*76 seconds*/
  36.66667% {
    content: "01:16";
  }
  /*75 seconds*/
  37.5% {
    content: "01:15";
  }
  /*74 seconds*/
  38.33333% {
    content: "01:14";
  }
  /*73 seconds*/
  39.16667% {
    content: "01:13";
  }
  /*72 seconds*/
  40% {
    content: "01:12";
  }
  /*71 seconds*/
  40.83333% {
    content: "01:11";
  }
  /*70 seconds*/
  41.66667% {
    content: "01:10";
  }
  /*69 seconds*/
  42.5% {
    content: "01:09";
  }
  /*68 seconds*/
  43.33333% {
    content: "01:08";
  }
  /*67 seconds*/
  44.16667% {
    content: "01:07";
  }
  /*66 seconds*/
  45% {
    content: "01:06";
  }
  /*65 seconds*/
  45.83333% {
    content: "01:05";
  }
  /*64 seconds*/
  46.66667% {
    content: "01:04";
  }
  /*63 seconds*/
  47.5% {
    content: "01:03";
  }
  /*62 seconds*/
  48.33333% {
    content: "01:02";
  }
  /*61 seconds*/
  49.16667% {
    content: "01:01";
  }
  /*60 seconds*/
  50% {
    content: "01:00";
  }
  /*59 seconds*/
  50.83333% {
    content: "00:59";
  }
  /*58 seconds*/
  51.66667% {
    content: "00:58";
  }
  /*57 seconds*/
  52.5% {
    content: "00:57";
  }
  /*56 seconds*/
  53.33333% {
    content: "00:56";
  }
  /*55 seconds*/
  54.16667% {
    content: "00:55";
  }
  /*54 seconds*/
  55% {
    content: "00:54";
  }
  /*53 seconds*/
  55.83333% {
    content: "00:53";
  }
  /*52 seconds*/
  56.66667% {
    content: "00:52";
  }
  /*51 seconds*/
  57.5% {
    content: "00:51";
  }
  /*50 seconds*/
  58.33333% {
    content: "00:50";
  }
  /*49 seconds*/
  59.16667% {
    content: "00:49";
  }
  /*48 seconds*/
  60% {
    content: "00:48";
  }
  /*47 seconds*/
  60.83333% {
    content: "00:47";
  }
  /*46 seconds*/
  61.66667% {
    content: "00:46";
  }
  /*45 seconds*/
  62.5% {
    content: "00:45";
  }
  /*44 seconds*/
  63.33333% {
    content: "00:44";
  }
  /*43 seconds*/
  64.16667% {
    content: "00:43";
  }
  /*42 seconds*/
  65% {
    content: "00:42";
  }
  /*41 seconds*/
  65.83333% {
    content: "00:41";
  }
  /*40 seconds*/
  66.66667% {
    content: "00:40";
  }
  /*39 seconds*/
  67.5% {
    content: "00:39";
  }
  /*38 seconds*/
  68.33333% {
    content: "00:38";
  }
  /*37 seconds*/
  69.16667% {
    content: "00:37";
  }
  /*36 seconds*/
  70% {
    content: "00:36";
  }
  /*35 seconds*/
  70.83333% {
    content: "00:35";
  }
  /*34 seconds*/
  71.66667% {
    content: "00:34";
  }
  /*33 seconds*/
  72.5% {
    content: "00:33";
  }
  /*32 seconds*/
  73.33333% {
    content: "00:32";
  }
  /*31 seconds*/
  74.16667% {
    content: "00:31";
  }
  /*30 seconds*/
  75% {
    content: "00:30";
  }
  /*29 seconds*/
  75.83333% {
    content: "00:29";
  }
  /*28 seconds*/
  76.66667% {
    content: "00:28";
  }
  /*27 seconds*/
  77.5% {
    content: "00:27";
  }
  /*26 seconds*/
  78.33333% {
    content: "00:26";
  }
  /*25 seconds*/
  79.16667% {
    content: "00:25";
  }
  /*24 seconds*/
  80% {
    content: "00:24";
  }
  /*23 seconds*/
  80.83333% {
    content: "00:23";
  }
  /*22 seconds*/
  81.66667% {
    content: "00:22";
  }
  /*21 seconds*/
  82.5% {
    content: "00:21";
  }
  /*20 seconds*/
  83.33333% {
    content: "00:20";
  }
  /*19 seconds*/
  84.16667% {
    content: "00:19";
  }
  /*18 seconds*/
  85% {
    content: "00:18";
  }
  /*17 seconds*/
  85.83333% {
    content: "00:17";
  }
  /*16 seconds*/
  86.66667% {
    content: "00:16";
  }
  /*15 seconds*/
  87.5% {
    content: "00:15";
  }
  /*14 seconds*/
  88.33333% {
    content: "00:14";
  }
  /*13 seconds*/
  89.16667% {
    content: "00:13";
  }
  /*12 seconds*/
  90% {
    content: "00:12";
  }
  /*11 seconds*/
  90.83333% {
    content: "00:11";
  }
  /*10 seconds*/
  91.66667% {
    content: "00:10";
  }
  /*9 seconds*/
  92.5% {
    content: "00:09";
  }
  /*8 seconds*/
  93.33333% {
    content: "00:08";
  }
  /*7 seconds*/
  94.16667% {
    content: "00:07";
  }
  /*6 seconds*/
  95% {
    content: "00:06";
  }
  /*5 seconds*/
  95.83333% {
    content: "00:05";
  }
  /*4 seconds*/
  96.66667% {
    content: "00:04";
  }
  /*3 seconds*/
  97.5% {
    content: "00:03";
  }
  /*2 seconds*/
  98.33333% {
    content: "00:02";
  }
  /*1 seconds*/
  99.16667% {
    content: "00:01";
  }
  /*0 seconds*/
  100% {
    content: "00:00";
  }
}
@keyframes counter {
  /*119 seconds*/
  0.83333% {
    content: "01:59";
  }
  /*118 seconds*/
  1.66667% {
    content: "01:58";
  }
  /*117 seconds*/
  2.5% {
    content: "01:57";
  }
  /*116 seconds*/
  3.33333% {
    content: "01:56";
  }
  /*115 seconds*/
  4.16667% {
    content: "01:55";
  }
  /*114 seconds*/
  5% {
    content: "01:54";
  }
  /*113 seconds*/
  5.83333% {
    content: "01:53";
  }
  /*112 seconds*/
  6.66667% {
    content: "01:52";
  }
  /*111 seconds*/
  7.5% {
    content: "01:51";
  }
  /*110 seconds*/
  8.33333% {
    content: "01:50";
  }
  /*109 seconds*/
  9.16667% {
    content: "01:49";
  }
  /*108 seconds*/
  10% {
    content: "01:48";
  }
  /*107 seconds*/
  10.83333% {
    content: "01:47";
  }
  /*106 seconds*/
  11.66667% {
    content: "01:46";
  }
  /*105 seconds*/
  12.5% {
    content: "01:45";
  }
  /*104 seconds*/
  13.33333% {
    content: "01:44";
  }
  /*103 seconds*/
  14.16667% {
    content: "01:43";
  }
  /*102 seconds*/
  15% {
    content: "01:42";
  }
  /*101 seconds*/
  15.83333% {
    content: "01:41";
  }
  /*100 seconds*/
  16.66667% {
    content: "01:40";
  }
  /*99 seconds*/
  17.5% {
    content: "01:39";
  }
  /*98 seconds*/
  18.33333% {
    content: "01:38";
  }
  /*97 seconds*/
  19.16667% {
    content: "01:37";
  }
  /*96 seconds*/
  20% {
    content: "01:36";
  }
  /*95 seconds*/
  20.83333% {
    content: "01:35";
  }
  /*94 seconds*/
  21.66667% {
    content: "01:34";
  }
  /*93 seconds*/
  22.5% {
    content: "01:33";
  }
  /*92 seconds*/
  23.33333% {
    content: "01:32";
  }
  /*91 seconds*/
  24.16667% {
    content: "01:31";
  }
  /*90 seconds*/
  25% {
    content: "01:30";
  }
  /*89 seconds*/
  25.83333% {
    content: "01:29";
  }
  /*88 seconds*/
  26.66667% {
    content: "01:28";
  }
  /*87 seconds*/
  27.5% {
    content: "01:27";
  }
  /*86 seconds*/
  28.33333% {
    content: "01:26";
  }
  /*85 seconds*/
  29.16667% {
    content: "01:25";
  }
  /*84 seconds*/
  30% {
    content: "01:24";
  }
  /*83 seconds*/
  30.83333% {
    content: "01:23";
  }
  /*82 seconds*/
  31.66667% {
    content: "01:22";
  }
  /*81 seconds*/
  32.5% {
    content: "01:21";
  }
  /*80 seconds*/
  33.33333% {
    content: "01:20";
  }
  /*79 seconds*/
  34.16667% {
    content: "01:19";
  }
  /*78 seconds*/
  35% {
    content: "01:18";
  }
  /*77 seconds*/
  35.83333% {
    content: "01:17";
  }
  /*76 seconds*/
  36.66667% {
    content: "01:16";
  }
  /*75 seconds*/
  37.5% {
    content: "01:15";
  }
  /*74 seconds*/
  38.33333% {
    content: "01:14";
  }
  /*73 seconds*/
  39.16667% {
    content: "01:13";
  }
  /*72 seconds*/
  40% {
    content: "01:12";
  }
  /*71 seconds*/
  40.83333% {
    content: "01:11";
  }
  /*70 seconds*/
  41.66667% {
    content: "01:10";
  }
  /*69 seconds*/
  42.5% {
    content: "01:09";
  }
  /*68 seconds*/
  43.33333% {
    content: "01:08";
  }
  /*67 seconds*/
  44.16667% {
    content: "01:07";
  }
  /*66 seconds*/
  45% {
    content: "01:06";
  }
  /*65 seconds*/
  45.83333% {
    content: "01:05";
  }
  /*64 seconds*/
  46.66667% {
    content: "01:04";
  }
  /*63 seconds*/
  47.5% {
    content: "01:03";
  }
  /*62 seconds*/
  48.33333% {
    content: "01:02";
  }
  /*61 seconds*/
  49.16667% {
    content: "01:01";
  }
  /*60 seconds*/
  50% {
    content: "01:00";
  }
  /*59 seconds*/
  50.83333% {
    content: "00:59";
  }
  /*58 seconds*/
  51.66667% {
    content: "00:58";
  }
  /*57 seconds*/
  52.5% {
    content: "00:57";
  }
  /*56 seconds*/
  53.33333% {
    content: "00:56";
  }
  /*55 seconds*/
  54.16667% {
    content: "00:55";
  }
  /*54 seconds*/
  55% {
    content: "00:54";
  }
  /*53 seconds*/
  55.83333% {
    content: "00:53";
  }
  /*52 seconds*/
  56.66667% {
    content: "00:52";
  }
  /*51 seconds*/
  57.5% {
    content: "00:51";
  }
  /*50 seconds*/
  58.33333% {
    content: "00:50";
  }
  /*49 seconds*/
  59.16667% {
    content: "00:49";
  }
  /*48 seconds*/
  60% {
    content: "00:48";
  }
  /*47 seconds*/
  60.83333% {
    content: "00:47";
  }
  /*46 seconds*/
  61.66667% {
    content: "00:46";
  }
  /*45 seconds*/
  62.5% {
    content: "00:45";
  }
  /*44 seconds*/
  63.33333% {
    content: "00:44";
  }
  /*43 seconds*/
  64.16667% {
    content: "00:43";
  }
  /*42 seconds*/
  65% {
    content: "00:42";
  }
  /*41 seconds*/
  65.83333% {
    content: "00:41";
  }
  /*40 seconds*/
  66.66667% {
    content: "00:40";
  }
  /*39 seconds*/
  67.5% {
    content: "00:39";
  }
  /*38 seconds*/
  68.33333% {
    content: "00:38";
  }
  /*37 seconds*/
  69.16667% {
    content: "00:37";
  }
  /*36 seconds*/
  70% {
    content: "00:36";
  }
  /*35 seconds*/
  70.83333% {
    content: "00:35";
  }
  /*34 seconds*/
  71.66667% {
    content: "00:34";
  }
  /*33 seconds*/
  72.5% {
    content: "00:33";
  }
  /*32 seconds*/
  73.33333% {
    content: "00:32";
  }
  /*31 seconds*/
  74.16667% {
    content: "00:31";
  }
  /*30 seconds*/
  75% {
    content: "00:30";
  }
  /*29 seconds*/
  75.83333% {
    content: "00:29";
  }
  /*28 seconds*/
  76.66667% {
    content: "00:28";
  }
  /*27 seconds*/
  77.5% {
    content: "00:27";
  }
  /*26 seconds*/
  78.33333% {
    content: "00:26";
  }
  /*25 seconds*/
  79.16667% {
    content: "00:25";
  }
  /*24 seconds*/
  80% {
    content: "00:24";
  }
  /*23 seconds*/
  80.83333% {
    content: "00:23";
  }
  /*22 seconds*/
  81.66667% {
    content: "00:22";
  }
  /*21 seconds*/
  82.5% {
    content: "00:21";
  }
  /*20 seconds*/
  83.33333% {
    content: "00:20";
  }
  /*19 seconds*/
  84.16667% {
    content: "00:19";
  }
  /*18 seconds*/
  85% {
    content: "00:18";
  }
  /*17 seconds*/
  85.83333% {
    content: "00:17";
  }
  /*16 seconds*/
  86.66667% {
    content: "00:16";
  }
  /*15 seconds*/
  87.5% {
    content: "00:15";
  }
  /*14 seconds*/
  88.33333% {
    content: "00:14";
  }
  /*13 seconds*/
  89.16667% {
    content: "00:13";
  }
  /*12 seconds*/
  90% {
    content: "00:12";
  }
  /*11 seconds*/
  90.83333% {
    content: "00:11";
  }
  /*10 seconds*/
  91.66667% {
    content: "00:10";
  }
  /*9 seconds*/
  92.5% {
    content: "00:09";
  }
  /*8 seconds*/
  93.33333% {
    content: "00:08";
  }
  /*7 seconds*/
  94.16667% {
    content: "00:07";
  }
  /*6 seconds*/
  95% {
    content: "00:06";
  }
  /*5 seconds*/
  95.83333% {
    content: "00:05";
  }
  /*4 seconds*/
  96.66667% {
    content: "00:04";
  }
  /*3 seconds*/
  97.5% {
    content: "00:03";
  }
  /*2 seconds*/
  98.33333% {
    content: "00:02";
  }
  /*1 seconds*/
  99.16667% {
    content: "00:01";
  }
  /*0 seconds*/
  100% {
    content: "00:00";
  }
}
/* Move out counter */
@-webkit-keyframes number {
  0% {
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
  }
  20% {
    -webkit-transform: translate(-50%, -25%);
    transform: translate(-50%, -25%);
  }
  100% {
    -webkit-transform: translate(-50%, -210%);
    transform: translate(-50%, -210%);
  }
}
@keyframes number {
  0% {
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
  }
  20% {
    -webkit-transform: translate(-50%, -25%);
    transform: translate(-50%, -25%);
  }
  100% {
    -webkit-transform: translate(-50%, -210%);
    transform: translate(-50%, -210%);
  }
}
/* Circle progress */
@-webkit-keyframes circle {
  from {
    stroke-dashoffset: 0;
  }
  to {
    stroke-dashoffset: 650;
  }
}
@keyframes circle {
  from {
    stroke-dashoffset: 0;
  }
  to {
    stroke-dashoffset: 650;
  }
}

＆＃13;

<div class="container">
    <svg>
        <!--Used for the drop shadow -->
        <path class="circle shadow" d="M200.2,302c-0.1,0-0.2,0-0.2,0c-56.9,0-103-46.1-103-103S143.1,96,200,96s103,46.1,103,103
			c0,56.8-45.9,102.8-102.6,103C200.3,302,200.3,302,200.2,302"/>
        <!-- Colored circle -->
        <path class="circle" d="M200.2,302c-0.1,0-0.2,0-0.2,0c-56.9,0-103-46.1-103-103S143.1,96,200,96s103,46.1,103,103
		    c0,56.8-45.9,102.8-102.6,103C200.3,302,200.3,302,200.2,302"/>
    </svg>

    <div class="mask">
        <div class="number"></div>
        <p>DONE</p>
    </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

不幸的是，如果你想要一个只有CSS的解决方案，我没有好消息。

不，内容属性不是“keyframable”，因为content属性包含字符串。关键帧只能为数字生成动画。您不能为“可见性”或“大小调整”设置关键帧，因为这些属性的值不是数字。同样，只要结果是数字，你就可以为“margin”之类的关键帧设置关键帧，而不是“自动”。

即使你在content属性中使用了一个数字，它仍然被认为是一个字符串，所以它不能是关键帧。

不幸的是，不，IE不允许您为SVG中的笔触属性设置动画。

Answer 2

经过进一步的研究，我最终得到了css-tricks。 https://css-tricks.com/animating-the-content-property/

基本上，内容属性未被W3C列为动画。尽管几乎所有浏览器都适用，但最新版本的Chrome现在支持它。

实验结论： 始终使用javascript为content属性设置动画！