Sandrina Pereira Sandrina Pereira - 1 month ago 14
CSS Question

css animation on "content:" doesn't work on Safari and Firefox

I have an animation set on

:before
that works fine on Chrome but it doesn't work on Safari (IOS9 iPhone or 9 - El Capitan) neither on Firefox.



.hey {
color: white;
}
.hey:before {
content: 'Hey \a there';
white-space: pre;
position: absolute;
color: red;
-moz-animation: heyThere 2250ms steps(11); /* for firefox */
-webkit-animation: heyThere 2250ms steps(11); /* for safari, chrome & opera */
}

@keyframes heyThere {
0% {content: "";}
1% {content: "";}
75% {content: "";}
77% {content: "H";}
80% {content: "He";}
83% {content: "Hey";}
85% {content: "Hey ";}
87% {content: "Hey \a t";}
90% {content: "Hey \a th";}
93% {content: "Hey \a the";}
95% {content: "Hey \a ther";}
97% {content: "Hey \a there";}
100% {content: "Hey \a there";}
}
@-moz-keyframes heyThere { /* animation for firefox */
0% {content: "";}
1% {content: "";}
75% {content: "";}
77% {content: "H";}
80% {content: "He";}
83% {content: "Hey";}
85% {content: "Hey ";}
87% {content: "Hey \a t";}
90% {content: "Hey \a th";}
93% {content: "Hey \a the";}
95% {content: "Hey \a ther";}
97% {content: "Hey \a there";}
100% {content: "Hey \a there";}
}
@-webkit-keyframes heyThere { /* animation for chrome, safari & opera */
0% {content: "";}
1% {content: "";}
75% {content: "";}
77% {content: "H";}
80% {content: "He";}
83% {content: "Hey";}
85% {content: "Hey ";}
87% {content: "Hey \a t";}
90% {content: "Hey \a th";}
93% {content: "Hey \a the";}
95% {content: "Hey \a ther";}
97% {content: "Hey \a there";}
100% {content: "Hey \a there";}
}

<div class="hey">Hey there</div>




Answer

As mentioned by @Pavan Kumar Jorrigala it is not possible to animate the content property of a pseudo element except in Chrome on desktop.

Here is an ass-backwards approach to what you are trying to achieve:

jsfiddle

.hey span {
  color: transparent;
  animation: heyThere 100ms;
  animation-fill-mode: forwards;
}

.hey span:nth-child(1) {
  animation-delay: 100ms;
}
.hey span:nth-child(2) {
  animation-delay: 300ms;
}
.hey span:nth-child(3) {
  animation-delay: 500ms;
}
.hey span:nth-child(4) {
  animation-delay: 700ms;
}
.hey span:nth-child(5) {
  animation-delay: 900ms;
}
.hey span:nth-child(6) {
  animation-delay: 1100ms;
}
.hey span:nth-child(7) {
  animation-delay: 1300ms;
}
.hey span:nth-child(8) {
  animation-delay: 1500ms;
}

@keyframes heyThere {
    0% {color: transparent;}
  100% {color: red;}
}
<div class="hey">
  <span>H</span>
  <span>e</span>
  <span>y&nbsp;</span>
  <span>T</span>
  <span>h</span>
  <span>e</span>
  <span>r</span>
  <span>e</span>
</div>

Comments