自动换行垂直滑动文本动画

Question

My vertical sliding text animation keeps getting cut off under mobile width. I've been trying to use media queries to target the code but I couldn't get the text and animation to wrap together. How do I adjust my code in order to have the entire animation and text wrap to a reduced width? Thanks!

Here's the HTML & CSS code I'm currently using.

 /*Sentence*/ .sentence { color: #222; font-size: 55px; text-align: left; } /*Wrapper*/ .wrapper { background-color: ; font-family: 'Cabin', sans-serif; margin: 50px auto; padding: 0px 0px; position: relative; width: 100%; } /*Vertical Sliding*/ .slidingVertical { display: inline; text-indent: 14px; } .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; } } /*Vertical Flip*/ .verticalFlip { display: inline; text-indent: 14px; } .verticalFlip span { animation: vertical 12.5s linear infinite 0s; -ms-animation: vertical 12.5s linear infinite 0s; -webkit-animation: vertical 12.5s linear infinite 0s; color: #00abe9; opacity: 0; overflow: hidden; position: absolute; } .verticalFlip span:nth-child(2) { animation-delay: 2.5s; -ms-animation-delay: 2.5s; -webkit-animation-delay: 2.5s; } .verticalFlip span:nth-child(3) { animation-delay: 5s; -ms-animation-delay: 5s; -webkit-animation-delay: 5s; } .verticalFlip span:nth-child(4) { animation-delay: 7.5s; -ms-animation-delay: 7.5s; -webkit-animation-delay: 7.5s; } .verticalFlip span:nth-child(5) { animation-delay: 10s; -ms-animation-delay: 10s; -webkit-animation-delay: 10s; } /*Vertical Flip Animation*/ @-moz-keyframes vertical { 0% { opacity: 0; } 5% { opacity: 0; -moz-transform: rotateX(180deg); } 10% { opacity: 1; -moz-transform: translateY(0px); } 25% { opacity: 1; -moz-transform: translateY(0px); } 30% { opacity: 0; -moz-transform: translateY(0px); } 80% { opacity: 0; } 100% { opacity: 0; } } @-webkit-keyframes vertical { 0% { opacity: 0; } 5% { opacity: 0; -webkit-transform: rotateX(180deg); } 10% { opacity: 1; -webkit-transform: translateY(0px); } 25% { opacity: 1; -webkit-transform: translateY(0px); } 30% { opacity: 0; -webkit-transform: translateY(0px); } 80% { opacity: 0; } 100% { opacity: 0; } } @-ms-keyframes vertical { 0% { opacity: 0; } 5% { opacity: 0; -ms-transform: rotateX(180deg); } 10% { opacity: 1; -ms-transform: translateY(0px); } 25% { opacity: 1; -ms-transform: translateY(0px); } 30% { opacity: 0; -ms-transform: translateY(0px); } 80% { opacity: 0; } 100% { opacity: 0; } }

 <section class="wrapper"> <h2 class="sentence">A Global Leader in <div class="slidingVertical"> <span>3PL</span> <span>Trading</span> <span>Manufacturing</span> <span>Warehousing</span> <span>Distribution</span> </div> </h2> </section>

Answer 1

Try like this:

 /*Sentence*/ .sentence{ color: #222; font-size: 55px; text-align: left; display: block; } .sentence > span { display: inline-block; margin-right: 14px; margin-bottom:0.5em; } /*Wrapper*/ .wrapper{ background-color: ; font-family: 'Cabin', sans-serif; margin: 100px auto; padding: 0px 0px; position: relative; width: 100%; } /*Vertical Sliding*/ .slidingVertical{ display: inline-block; width:7em; height:1.2em; vertical-align: top; } .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; } } /*Vertical Flip*/ .verticalFlip{ display: inline; text-indent: 14px; } .verticalFlip span{ animation: vertical 12.5s linear infinite 0s; -ms-animation: vertical 12.5s linear infinite 0s; -webkit-animation: vertical 12.5s linear infinite 0s; color: #00abe9; opacity: 0; overflow: hidden; position: absolute; } .verticalFlip span:nth-child(2){ animation-delay: 2.5s; -ms-animation-delay: 2.5s; -webkit-animation-delay: 2.5s; } .verticalFlip span:nth-child(3){ animation-delay: 5s; -ms-animation-delay: 5s; -webkit-animation-delay: 5s; } .verticalFlip span:nth-child(4){ animation-delay: 7.5s; -ms-animation-delay: 7.5s; -webkit-animation-delay: 7.5s; } .verticalFlip span:nth-child(5){ animation-delay: 10s; -ms-animation-delay: 10s; -webkit-animation-delay: 10s; } /*Vertical Flip Animation*/ @-moz-keyframes vertical{ 0% { opacity: 0; } 5% { opacity: 0; -moz-transform: rotateX(180deg); } 10% { opacity: 1; -moz-transform: translateY(0px); } 25% { opacity: 1; -moz-transform: translateY(0px); } 30% { opacity: 0; -moz-transform: translateY(0px); } 80% { opacity: 0; } 100% { opacity: 0;} } @-webkit-keyframes vertical{ 0% { opacity: 0; } 5% { opacity: 0; -webkit-transform: rotateX(180deg); } 10% { opacity: 1; -webkit-transform: translateY(0px); } 25% { opacity: 1; -webkit-transform: translateY(0px); } 30% { opacity: 0; -webkit-transform: translateY(0px); } 80% { opacity: 0; } 100% { opacity: 0; } } @-ms-keyframes vertical{ 0% { opacity: 0; } 5% { opacity: 0; -ms-transform: rotateX(180deg); } 10% { opacity: 1; -ms-transform: translateY(0px); } 25% { opacity: 1; -ms-transform: translateY(0px); } 30% { opacity: 0; -ms-transform: translateY(0px); } 80% { opacity: 0; } 100% { opacity: 0; } }

 <section class="wrapper"> <h2 class="sentence"> <span>A Global Leader in </span> <div class="slidingVertical"> <span> 3PL</span> <span> Trading</span> <span> Manufacturing</span> <span> Warehousing</span> <span> Distribution</span> </div> </h2>

The reason it didn't wrap to the width of the screen was because .slidingVertical span used absolute positioning, so the container .slidingVertical had 0 width.

In the above example, .slidingVertical has been changed to be an inline-block as wide as the widest span inside it (set manually). This allows the sentence to wrap correctly.