How can I make this animated word cycle (made up of absolute positioned span
s) to wrap correctly as if it were a regular word inside .sentence
? Maybe it's possible to add a ghost inline element with a fixed width (the width of the larger word in the cycle)?
/*Body*/
body {
background-color: #00abe9;
font-family: 'Raleway', sans-serif;
}
/*Heading1*/
h1 {
color: #fff;
font-size: 44px;
margin-top: 40px;
text-align: center;
}
/*Sentence*/
.sentence {
color: #222;
font-size: 30px;
text-align: left;
}
/*Wrapper*/
.wrapper {
background-color: #f5f5f5;
font-family: 'Raleway', sans-serif;
margin: 100px auto;
padding: 40px 40px;
position: relative;
width: 70%;
}
/*Vertical Sliding*/
.slidingVertical {
display: inline;
text-indent: 8px;
}
.slidingVertical span {
animation: topToBottom 12.5s linear infinite 0s;
-ms-animation: topToBottom 12.5s linear infinite 0s;
-webkit-animation: topToBottom 12.5s linear infinite 0s;
color: #00abe9;
opacity: 0;
overflow: hidden;
position: absolute;
}
.slidingVertical span:nth-child(2) {
animation-delay: 2.5s;
-ms-animation-delay: 2.5s;
-webkit-animation-delay: 2.5s;
}
.slidingVertical span:nth-child(3) {
animation-delay: 5s;
-ms-animation-delay: 5s;
-webkit-animation-delay: 5s;
}
.slidingVertical span:nth-child(4) {
animation-delay: 7.5s;
-ms-animation-delay: 7.5s;
-webkit-animation-delay: 7.5s;
}
.slidingVertical span:nth-child(5) {
animation-delay: 10s;
-ms-animation-delay: 10s;
-webkit-animation-delay: 10s;
}
/*topToBottom Animation*/
@-moz-keyframes topToBottom {
0% {
opacity: 0;
}
5% {
opacity: 0;
-moz-transform: translateY(-50px);
}
10% {
opacity: 1;
-moz-transform: translateY(0px);
}
25% {
opacity: 1;
-moz-transform: translateY(0px);
}
30% {
opacity: 0;
-moz-transform: translateY(50px);
}
80% {
opacity: 0;
}
100% {
opacity: 0;
}
}
@-webkit-keyframes topToBottom {
0% {
opacity: 0;
}
5% {
opacity: 0;
-webkit-transform: translateY(-50px);
}
10% {
opacity: 1;
-webkit-transform: translateY(0px);
}
25% {
opacity: 1;
-webkit-transform: translateY(0px);
}
30% {
opacity: 0;
-webkit-transform: translateY(50px);
}
80% {
opacity: 0;
}
100% {
opacity: 0;
}
}
@-ms-keyframes topToBottom {
0% {
opacity: 0;
}
5% {
opacity: 0;
-ms-transform: translateY(-50px);
}
10% {
opacity: 1;
-ms-transform: translateY(0px);
}
25% {
opacity: 1;
-ms-transform: translateY(0px);
}
30% {
opacity: 0;
-ms-transform: translateY(50px);
}
80% {
opacity: 0;
}
100% {
opacity: 0;
}
}
<section class="wrapper">
<h2 class="sentence">Our product is
<div class="slidingVertical">
<span>Amazing.</span>
<span>Beautiful.</span>
<span>Cute.</span>
<span>Delightful.</span>
<span>Emotional.</span>
</div>
</h2>
</section>
Don't make all the words
position:absolute
. Keep one of themposition:relative
(the longest one) so you can have a correct wrapping: