JSFiddle - React, Tailwind, and code Playground
HTML
<h2 class="rw-sentence">
<span>«Madeas studio»</span>
<div class="rw-words rw-words-1">
<span>красивые сайты</span>
<span>удобные интерфейсы</span>
<span>нейминг и слоган</span>
<span>фирменный стиль</span>
<span>уникальный логотип</span>
<span>поддержка и обслуживание</span>
</div>
<div class="rw-words rw-words-2">
<span>, которые создают огромные доходы</span>
<span>, которые понравятся вашим пользователям</span>
<span>, которые помогут вам выделиться</span>
<span>, который подчеркнет характер вашей компании</span>
<span>, который будет вести вас вперед </span>
<span>, которые сделают вашу жизнь проще </span>
</div>
</h2>
CSS
.rw-wrapper{
width: 80%;
position: relative;
margin: 10px auto 0 auto;
padding: 10px;
}
.rw-sentence{
margin: 0;
text-transform: uppercase;
font-weight: 300;
text-shadow: 0 0 0 rgba(0,0,0,0.0001);
}
.rw-sentence span{
color: #000;
white-space: nowrap;
}
.rw-sentence > span:first-child{
display: block;
text-indent: 5px;
font-size: 145%;
}
.rw-words{
width: 100%;
height: 100px;
-webkit-perspective: 800px;
perspective: 800px;
}
.rw-words span{
position: absolute;
width: 100%;
opacity: 0;
white-space: nowrap;
overflow: hidden;
}
.rw-words-1 span{
font-size: 280%;
line-height: 82%;
-webkit-animation: rotateWordsFirst 18s linear infinite 0s;
-ms-animation: rotateWordsFirst 18s linear infinite 0s;
animation: rotateWordsFirst 18s linear infinite 0s;
}
.rw-words-2 span{
font-size: 80%;
font-style: italic;
text-indent: 5px;
line-height: 90%;
color: #da0a0a;
-webkit-animation: rotateWordsSecond 18s ease-in infinite 0s;
-ms-animation: rotateWordsSecond 18s ease-in infinite 0s;
animation: rotateWordsSecond 18s ease-in infinite 0s;
}
.rw-words span:nth-child(2) {
-webkit-animation-delay: 3s;
-ms-animation-delay: 3s;
animation-delay: 3s;
}
.rw-words span:nth-child(3) {
-webkit-animation-delay: 6s;
-ms-animation-delay: 6s;
animation-delay: 6s;
}
.rw-words span:nth-child(4) {
-webkit-animation-delay: 9s;
-ms-animation-delay: 9s;
animation-delay: 9s;
}
.rw-words span:nth-child(5) {
-webkit-animation-delay: 12s;
-ms-animation-delay: 12s;
animation-delay: 12s;
}
.rw-words span:nth-child(6) {
-webkit-animation-delay: 15s;
-ms-animation-delay: 15s;
animation-delay: 15s;
}
@-webkit-keyframes rotateWordsFirst {
0% { opacity: 0; -webkit-animation-timing-function: ease-in; width: 0px;}
5% { opacity: 1; -webkit-animation-timing-function: ease-out; width: 100%;}
17% { opacity: 1; }
20% { opacity: 0; }
100% { opacity: 0; }
}
@-ms-keyframes rotateWordsFirst {
0% { opacity: 0;...