Некоторые хотят создать анимация текстового цикла, которое только задействована на чистом CSS3. Что будет обозначать, где вы прописываете текст, который идет постоянно, где даже нет паузы, что можно такой эффект анимации реализовать под то, что как можно больше оповестить гостей и пользователей.
По дизайну:
HTML
Код
<div class="animation">
<div class="salopad">
<div class="kidsam">
Бесконечность не предел<span> </span></div>
<div class="kidsam">Бесконечность не предел<span> </span></div>
<div class="kidsam">Бесконечность не предел<span> </span></div>
<div class="kidsam">Бесконечность не предел<span> </span></div>
</div>
<div class="salopad">
<div class="kidsam">Бесконечность не предел<span> </span></div>
<div class="kidsam">Бесконечность не предел<span> </span></div>
<div class="kidsam">Бесконечность не предел<span> </span></div>
<div class="kidsam">Бесконечность не предел<span> </span></div>
</div>
</div>
CSS
Код
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: #282828;
}
.animation {
display: flex;
white-space: nowrap;
}
.salopad {
display: flex;
font-size: 5vw;
-webkit-animation: loop 20s infinite linear;
animation: loop 20s infinite linear;
}
.kidsam {color: #00ffb6;}
@keyframes loop {
100% {
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
}
}
Как видим, что не чего сложного нет, где можно выставить свое оригинальное оформление.
Демонстрация
