Вы можете сделать что-то подобное, сделав несколько ключевых кадров в анимации.
@-webkit-keyframes fade-in {
0%{
opacity: 0;
top: 50px;
}
30%,
70% {
opacity: 1;
top: 0px;
}
100% {
opacity: 0;
top: -50px;
}
}
.text-animated-one {
display: inline;
position: relative;
top: 0px;
-webkit-animation: fade-in 3s infinite;
float: left;
text-align: center;
margin: 0 auto;
width: 100%;
}
.text-animated-two {
opacity: 0;
display: inline;
position: relative;
margin-left: -56px;
-webkit-animation: fade-in 3s infinite;
-webkit-animation-delay: .5s;
float: left;
text-align: center;
margin: 0 auto;
width: 100%;
}
.aggettivi {
display: inline;
font-size: 6vw;
text-align: center;
margin: 0 auto;
color: white;
}
.container {
background: #E20816;
width: 100%;
float: left;
margin: 0 auto;
text-align: center;
}
<div class="container">
<div class="aggettivi">
<div class="text-animated-one">「いつもキレイ」を</div>
<div class="text-animated-two">「私らしく」選べる。</div>
</div>
</div>
С добавлением дополнительной задержки в скрытом состоянии
@-webkit-keyframes fade-in {
0%,20% {
opacity: 0;
top: 50px;
}
30%,
70% {
opacity: 1;
top: 0px;
}
80%,100% {
opacity: 0;
top: -50px;
}
}
.text-animated-one {
display: inline;
position: relative;
top: 0px;
-webkit-animation: fade-in 3s infinite;
float: left;
text-align: center;
margin: 0 auto;
width: 100%;
}
.text-animated-two {
opacity: 0;
display: inline;
position: relative;
margin-left: -56px;
-webkit-animation: fade-in 3s infinite;
-webkit-animation-delay: .5s;
float: left;
text-align: center;
margin: 0 auto;
width: 100%;
}
.aggettivi {
display: inline;
font-size: 6vw;
text-align: center;
margin: 0 auto;
color: white;
}
.container {
background: #E20816;
width: 100%;
float: left;
margin: 0 auto;
text-align: center;
}
<div class="container">
<div class="aggettivi">
<div class="text-animated-one">「いつもキレイ」を</div>
<div class="text-animated-two">「私らしく」選べる。</div>
</div>
</div>
ОБНОВЛЕНИЕ: Для добавления эффекта прокрутки вы можете использовать свойство CSS tansform
с translateY
и родительский элемент с overflow: hidden;
.
@-webkit-keyframes fade-in {
0%,
20% {
transform: translateY(100%);
}
30%,
70% {
transform: translateY(0);
}
80%,
100% {
transform: translateY(-100%);
}
}
.text {
overflow: hidden;
margin: 10px 0;
}
.text-animated-one {
display: inline;
position: relative;
top: 0px;
-webkit-animation: fade-in 4.5s infinite;
float: left;
text-align: center;
margin: 0 auto;
width: 100%;
}
.text-animated-two {
display: inline;
position: relative;
margin-left: -56px;
-webkit-animation: fade-in 4.5s infinite;
-webkit-animation-delay: 750ms;
float: left;
text-align: center;
margin: 0 auto;
width: 100%;
transform: translateY(50px);
}
.aggettivi {
display: inline;
font-size: 6vw;
text-align: center;
margin: 0 auto;
color: white;
}
.container {
background: #E20816;
width: 100%;
float: left;
margin: 0 auto;
text-align: center;
}
<div class="container">
<div class="aggettivi">
<div class="text">
<div class="text-animated-one">「いつもキレイ」を</div>
</div>
<div class="text">
<div class="text-animated-two">「私らしく」選べる。</div>
</div>
</div>
</div>