Using html attr() within CSS keyframes not working in Safari

HTML & CSS
1

I am trying to fade in and out 4 pieces of text over a 28 second period. I am using opacity and color change on the text to try and make this work. It works in Chrome and Firefox - but not Safari. I am using an HTML attr to call-in data. Please see codepen for example. Thanks for the help in advance. Ps. I have tried with and without -webkit- and this doesn’t seem to be the issue.

https://codepen.io/davidlower8/pen/wvMJwvm

<h2 class="hero-animated-text" data-1="Loving it 1" data-2="Loving it 2" data-3="Loving it 3" data-4="Loving it 4"></h2>

.hero-animated-text:before 
{
  content: '';
  animation-name: hero-text;
  animation-duration: 28s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-out;
  -webkit-animation-name: hero-text;
  -webkit-animation-duration: 28s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: ease-out;
  opacity: 0;
  color: white;
} 

@-webkit-keyframes hero-text 
{
  12.5%
  {
    content: attr(data-1);
    opacity: 1;
    color: color(1);
  }
  25% 
  {
    opacity:0; 
    color: white;
  }
  37.5%
  {
    content: attr(data-2);
    opacity: 1;
    color: color(1);
  }
  50% 
  {
    opacity:0; 
    color: white;
  }
  62.5%
  {
    content: attr(data-3);
    opacity: 1;
    color: color(1);
  }
  75% 
  {
    opacity:0; 
    color: white;
  }
  87.5%
  {
    content: attr(data-4);
    opacity: 1;
    color: color(1);
  }
  100% 
  {
    opacity: 0;
    color: white;
  }
}
2

I believe the content property is not on the list of animatable properties and therefore is down to each browser whether it animates it or not.

This article mentions the same fact a couple of years ago.

You will probably have to resort to holding the text in spans or similar for cross browser support.

3

Hey Paul,

I really appreciate you helping me out on this one. I did not know you couldn’t animate the content element. So if I use spans how would I loosely get that to work? I don’t need a full answer. Just a point in the right direction. I can’t think how else I can achieve this affect. Cheers.

4

Yes your first method would have been very neat and shame it didn’t work cross browser.

You could just animate some spans on and off but you have to get the keyframe timing right.

There are probably other ways but that was my first thought. Of course it depends on the context and if you have some lines much longer (or wrapping) then you would get a page jump. The demo above absolutely places all the spans except the first one which is just hidden with opacity but still takes up space in the flow. That’s fine as long as text doesn’t wrap as I mentioned above otherwise you probably would need a min-height.

5

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.