title: Animating :after{content:""} with @keyframes
body: <p>I created this countdown and it works perfectly on Chrome. The problems are on other browsers, where I can't get it to work in the following ways:</p>
  
  <p>Firefox: The numbers CSS content property isn't animated<br>
  IE11: Nothing works</p>
  
  <p><a href="http://codepen.io/jonathanpion/pen/jVQRjB" rel="nofollow noreferrer">CodePen</a> for editing/visualization</p>
  
  <p>Is there a cross-browser way to animate the content property of pseudo elements with @keyframes that's reliable? If not, can you think of another CSS-only way to do the countdown? Also, isn't IE11 supposed to support SVG stroke animation?</p>
  
  <p>Here is the full demo with Sass compiled to CSS:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>@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;
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="container"&gt;
      &lt;svg&gt;
          &lt;!--Used for the drop shadow --&gt;
          &lt;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"/&gt;
          &lt;!-- Colored circle --&gt;
          &lt;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"/&gt;
      &lt;/svg&gt;
  
      &lt;div class="mask"&gt;
          &lt;div class="number"&gt;&lt;/div&gt;
          &lt;p&gt;DONE&lt;/p&gt;
      &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>