CSS marquee doesn't work on Safari

问题

I'm very happy with the way the marquee works on my website, it works in all browsers except of Safari. What am I doing wrong? Is there anything I can do in order to play the same in Safari as well?

.marquee {
  width: 260px;
  margin: 0 auto;
  overflow: hidden;
  whitespace: nowrap;
  fontsize: 20px;
  position: absolute;
  color: #fff;
  text-shadow: #000 1px 1px 0;
  font-family: Tahoma, Arial, sans-serif
}

@-webkit-keyframes marquee {
  0% {
    -webkit-transform: translate(0, 0);
  }
  100% {
    -webkit-transform: translate(-100%, 0);
  }
}

<p class="marquee">bla bla bla</p>

回答1:

You're missing the animation part of your code. Plus, I'm not sure transform is going to work without first creating a wrapper to hide the overflow. Here's an attempt that uses text-indent instead.

.marquee {
  width: 260px;
  margin: 0 auto;
  overflow: hidden;
  white-space: nowrap;
  font-size: 20px;
  position: absolute;
  color: #fff;
  text-shadow: #000 1px 1px 0;
  font-family: Tahoma, Arial, sans-serif;
  -webkit-animation: marquee 5s linear infinite;
}

@-webkit-keyframes marquee {
  0% {
    text-indent: 260px;
  }
  100% {
    text-indent: -260px;
  }
}

<p class="marquee">bla bla bla</p>

EDIT: Here's another approach using a wrapper.

.marquee {
  overflow: hidden;
  white-space: nowrap;
  font-size: 20px;
  color: #fff;
  text-shadow: #000 1px 1px 0;
  font-family: Tahoma, Arial, sans-serif;
  display:inline-block;
  
  width: 260px;
}

.marquee span {
  display:inline-block;
  min-width: 100%;
  -webkit-animation: marquee 3s linear infinite;
}

@-webkit-keyframes marquee {
  0% {
    -webkit-transform: translateX(100%);
  }
  100% {
    -webkit-transform: translateX(-100%);
  }
}

<p class="marquee"><span>bla bla bla</span></p>

来源：https://stackoverflow.com/questions/34815386/css-marquee-doesnt-work-on-safari

标签

css

css3

css-animations

keyframe