Как скопировать текст по фиксированному интервалу времени

Question

Я хочу анимировать текст сверху вниз на слайдере. Вот 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сек промежуток времени между анимации.

Answer 1

Вы можете использовать функцию setInterval, чтобы сохранить промежуток времени в 15 секунд.

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

Answer 2

Это может быть сделано с использованием чистого 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>