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>

文章来源: CSS marquee doesn't work on Safari