如何在固定的時間間隔後滑動文本

我想在滑塊上從上到下動畫文本。下面是我用來製作動畫的CSS：如何在固定的時間間隔後滑動文本

HTML：

<p class="rg5 slideInDown" id="text-animation">mobile</p>

CSS：

.rg5 { 
    font-family: roboto sans-serif;; 
    font-size: 52px; 
    color: #ffffff; 
    margin-bottom: 10%; 
    line-height: 1; 
    text-transform: uppercase; 
    transition: 1s ease-in-out; 
    animation: slidein 5s infinite; 
    -webkit-transition: 1s ease-in-out; 
    -moz-transition: 1s ease-in-out; 
    -o-transition: 1s ease-in-out; 
    -webkit-animation: slidein 5s infinite; 
    -moz-animation: slidein 5s infinite; 
    -o-animation: slidein 5s infinite; 
    animation-fill-mode: forwards; 
} 
.slidein { 
    -moz-animation-duration: 5s; 
    -webkit-animation-duration: 5s; 
    animation-duration: 5s; 
    -moz-animation-name: slidein; 
    -webkit-animation-name: slidein; 
    animation-name: slidein; 
    -moz-animation-iteration-count: 3; 
    -webkit-animation-iteration-count: 3; 
    animation-iteration-count: 3; 
    -moz-animation-direction: alternate; 
    -webkit-animation-direction: alternate; 
    animation-direction: alternate; 
} 
@-moz-keyframes slidein { 
    from { 
    -moz-transform: translate(1,-30em) scale(1.2); 
} 
    to { 
    -moz-transform: translate(1em,1) scale(1.2); 
    } 
} 
@-webkit-keyframes slidein { 
    from { -webkit-transform: translate(0s,-20em) scale(1.2); 
    } 
    to { -webkit-transform: translate(0em,0) scale(1.2); 
    } 
} 
@keyframes slidein { 
    from { 
    transform: translate(0,-20em) scale(1.2); 
    } 
    to { 
    transform: translate(0em,0) scale(1.2); 
    } 
}

其完美的工作，同時滑動頂部底部，但應該有之間15秒的時間間隔動畫。

來源

2017-02-21 Priyanka Kaushik

-1

您可以使用setInterval函數來保持15秒的時間間隔。

setInterval(function() 
{ 
    your_function(); 
}, 15000);

來源

2017-02-21 13:13:52

可直接與CSS來完成。 –

mahesh我沒有使用jQuery的動畫我使用CSS所以請告訴我如何用CSS實現。如果它可能與jQuery然後讓我知道完整的功能。 –

這可以使用純CSS來完成，不建議使用setInterval。

對於後續動畫之間的時間差距，您可以使用animation-iteration-count: infinite; & animation-delay: 15s;。

參考代碼：

.rg5 { 
 
    font-family: roboto sans-serif; 
 
    font-size: 52px; 
 
    color: black; 
 
    margin-bottom: 10%; 
 
    line-height: 1; 
 
    text-transform: uppercase; 
 
    transition: 1s ease-in-out; 
 
    animation: slidein 5s infinite; 
 
    -webkit-transition: 1s ease-in-out; 
 
    -moz-transition: 1s ease-in-out; 
 
    -o-transition: 1s ease-in-out; 
 
    -webkit-animation: slidein 5s infinite; 
 
    -moz-animation: slidein 5s infinite; 
 
    -o-animation: slidein 5s infinite; 
 
    animation-fill-mode: forwards; 
 
} 
 

 
.slidein { 
 
    -webkit-animation-delay: 15s; /* Safari 4.0 - 8.0 */ 
 
    -moz-animation-delay: 15s; 
 
    animation-delay: 15s; 
 
} 
 

 
@-moz-keyframes slidein { 
 
    from { 
 
    -moz-transform: translate(1, -30em) scale(1.2); 
 
    } 
 
    to { 
 
    -moz-transform: translate(1em, 1) scale(1.2); 
 
    } 
 
} 
 

 
@-webkit-keyframes slidein { 
 
    from { 
 
    -webkit-transform: translate(0s, -20em) scale(1.2); 
 
    } 
 
    to { 
 
    -webkit-transform: translate(0em, 0) scale(1.2); 
 
    } 
 
} 
 

 
@keyframes slidein { 
 
    from { 
 
    transform: translate(0, -20em) scale(1.2); 
 
    } 
 
    to { 
 
    transform: translate(0em, 0) scale(1.2); 
 
    } 
 
}

<p class="rg5 slideInDown" id="text-animation">mobile</p>

來源

2017-02-21 13:20:34 nashcheez

如何在固定的時間間隔後滑動文本

回答

相關問題