Question

我正在尝试使用CSS动画创建一个选框。我的文字是动态的，然后我不知道全文的宽度。这是我的代码段：

.marquee p {
    /* Starting position */
    -moz-transform:translateX(100%);
    -webkit-transform:translateX(100%);    
    transform:translateX(100%);
    /* Apply animation to this element */  
    -moz-animation: scroll-right 5s linear infinite;
    -webkit-animation: scroll-right 5s linear infinite;
    animation: scroll-right 5s linear infinite;

    white-space: nowrap;
}
.marq-text{
    margin-left:100px;
}
/* Move it (define the animation) */
@-moz-keyframes scroll-right {
    0%   { -moz-transform: translateX(-100%); }
    100% { -moz-transform: translateX(100%); }
}
@-webkit-keyframes scroll-right {
    0%   { -webkit-transform: translateX(-100%); }
    100% { -webkit-transform: translateX(100%); }
}
@keyframes scroll-right {
    0%   
    { 
        -moz-transform: translateX(-100%); /* Browser bug fix */
        -webkit-transform: translateX(-100%); /* Browser bug fix */
        transform: translateX(-100%);       
    }
    100% 
    { 
        -moz-transform: translateX(100%); /* Browser bug fix */
        -webkit-transform: translateX(100%); /* Browser bug fix */
        transform: translateX(100%); 
    }
}

.marquee{
  width:400px;
  border:red solid 1px;
  margin:0 auto;
  /* overflow:hidden; */
}

<div class="marquee">
  <p>
    <span class='marq-text'>This text is a looooooooong marquee.</span>;
    <span class='marq-text'>And This one is another :-)</span>;
    <span class='marq-text'>Third marquee is ignored completely :-(</span>;
  </p>
</div>

https://jsfiddle.net/rostamiani/4wyczguj/12/

（语言将是RTL，然后动画是从左到右）

在所有文本出现之前，CSS Marquee动画中断

0 个答案: