Ticketa
Registered
https://codepen.io/Ticketa/pen/KKNaqZb
Код:
<meta charset="UTF-8">
<style>.ms-header {
display: flex;
align-items: center;
jsutify-content: center;
font-family: sans-serif;
}
.ms-header__title {
flex: 1 1 100%;
width: 100%;
text-align: center;
/*font-size: 4rem;*/
font-weight: bold;
}
.ms-slider {
display: inline-block;
height: 1.5em;
overflow: hidden;
vertical-align: middle;
-webkit-mask-image: linear-gradient(transparent, white, white, white, transparent);
mask-image: linear-gradient(transparent, white, white, white, transparent);
mask-type: luminance;
mask-mode: alpha;
}
.ms-slider__words {
display: inline-block;
margin: 0;
padding: 0;
list-style: none;
-webkit-animation-name: wordSlider;
animation-name: wordSlider;
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-duration: 7s;
animation-duration: 7s;
}
.ms-slider__word {
display: block;
line-height: 1.3em;
text-align: left;
}
@-webkit-keyframes wordSlider {
0%,
27% {
-webkit-transform: translateY(0%);
transform: translateY(0%);
}
33%,
60% {
-webkit-transform: translateY(-20%);
transform: translateY(-20%);
}
66%,
93% {
-webkit-transform: translateY(-40%);
transform: translateY(-40%);
}
100% {
-webkit-transform: translateY(-60% -80%);
transform: translateY(-60% -80%);
}
}
@keyframes wordSlider {
0%,
27% {
-webkit-transform: translateY(0%);
transform: translateY(0%);
}
33%,
60% {
-webkit-transform: translateY(-20%);
transform: translateY(-20%);
}
66%,
93% {
-webkit-transform: translateY(-40%);
transform: translateY(-40%);
}
100% {
-webkit-transform: translateY(-60% -80%);
transform: translateY(-60% -80%);
}
}</style><header class="ms-header">
<h1 class="ms-header__title">
Text
<div class="ms-slider">
<ul class="ms-slider__words">
<li class="ms-slider__word">string1</li>
<li class="ms-slider__word">string2</li>
<li class="ms-slider__word">string3</li>
<li class="ms-slider__word">string4</li>
<li class="ms-slider__word">string1</li>
</ul>
</div>
</h1>
</header>