Animate a single word in a sentence with CSS - html

I'm trying to animate a single word in the middle of a sentence using CSS and HTML. I'm want the word to animate downward and fade out, as a new word fades in from above. My problem is that the rest of the sentence after the animating word isn't spacing correctly. As you can see below, the animating word is overlapping the rest of the sentence.
Here's a screencast of the animation: https://www.dropbox.com/s/svjrbqug3gjsg2s/movie.mov?dl=0
And here's my code so far:
<html>
<head>
<link rel="stylesheet" type="text/css" href="rotate.css">
</head>
<section class="rw-wrapper">
<span>The</span>
<div class="rw-words rw-words-1">
<span>inspiration</span>
<span>accountability</span>
<span>results</span>
<span>community</span>
<span>experience</span>
<span>coaching</span>
</div>
<span>you're looking for.</span>
</section>
</html>
CSS:
.rw-wrapper{
width: 80%;
position: relative;
margin: 110px auto 0 auto;
font-family: 'Bree Serif';
padding: 10px;
}
.rw-words{
display: inline;
text-indent: 2px;
}
.rw-words-1 span{
position: absolute;
opacity: 0;
overflow: hidden;
color: #6b969d;
-webkit-animation: rotateWord 18s linear infinite 0s;
-ms-animation: rotateWord 18s linear infinite 0s;
animation: rotateWord 18s linear infinite 0s;
}
.rw-words-1 span:nth-child(2) {
-webkit-animation-delay: 3s;
-ms-animation-delay: 3s;
animation-delay: 3s;
color: #6b969d;
}
.rw-words-1 span:nth-child(3) {
-webkit-animation-delay: 6s;
-ms-animation-delay: 6s;
animation-delay: 6s;
color: #6b969d;
}
.rw-words-1 span:nth-child(4) {
-webkit-animation-delay: 9s;
-ms-animation-delay: 9s;
animation-delay: 9s;
color: #6b969d;
}
.rw-words-1 span:nth-child(5) {
-webkit-animation-delay: 12s;
-ms-animation-delay: 12s;
animation-delay: 12s;
color: #6b969d;
}
.rw-words-1 span:nth-child(6) {
-webkit-animation-delay: 15s;
-ms-animation-delay: 15s;
animation-delay: 15s;
color: #6b969d;
}
#-webkit-keyframes rotateWord {
0% { opacity: 0; }
2% { opacity: 0; -webkit-transform: translateY(-30px); }
5% { opacity: 1; -webkit-transform: translateY(0px);}
17% { opacity: 1; -webkit-transform: translateY(0px); }
20% { opacity: 0; -webkit-transform: translateY(30px); }
80% { opacity: 0; }
100% { opacity: 0; }
}
#-ms-keyframes rotateWord {
0% { opacity: 0; }
2% { opacity: 0; -ms-transform: translateY(-30px); }
5% { opacity: 1; -ms-transform: translateY(0px);}
17% { opacity: 1; -ms-transform: translateY(0px); }
20% { opacity: 0; -ms-transform: translateY(30px); }
80% { opacity: 0; }
100% { opacity: 0; }
}
#keyframes rotateWord {
0% { opacity: 0; }
2% { opacity: 0; -webkit-transform: translateY(-30px); transform: translateY(-30px); }
5% { opacity: 1; -webkit-transform: translateY(0px); transform: translateY(0px);}
17% { opacity: 1; -webkit-transform: translateY(0px); transform: translateY(0px); }
20% { opacity: 0; -webkit-transform: translateY(30px); transform: translateY(30px); }
80% { opacity: 0; }
100% { opacity: 0; }
}
#media screen and (max-width: 768px){
.rw-sentence { font-size: 18px; }
}
#media screen and (max-width: 320px){
.rw-sentence { font-size: 9px; }
}
How can I use CSS to get the rest of my sentence to space properly for the animating word?


You can do this in pure CSS by animating the max-width of the individual spans. Here’s a CodePen, and here’s the CSS (prefixes removed for clarity. To get them back just click the little 'View Compiled' button on CodePen)
.rw-wrapper{
width: 80%;
position: relative;
margin: 110px auto 0 auto;
font-family: 'Bree Serif';
padding: 10px;
}
.rw-words{
display: inline-block;
text-indent: 2px;
}
.rw-words-1 span{
max-width: 0;
display: inline-block;
opacity: 0;
overflow: hidden;
color: #6b969d;
margin-left: -4px;
animation: rotateWord 18s linear infinite 0s;
}
.rw-words-1 span:nth-child(2) {
animation-delay: 3s;
color: #6b969d;
}
.rw-words-1 span:nth-child(3) {
animation-delay: 6s;
color: #6b969d;
}
.rw-words-1 span:nth-child(4) {
animation-delay: 9s;
color: #6b969d;
}
.rw-words-1 span:nth-child(5) {
animation-delay: 12s;
color: #6b969d;
}
.rw-words-1 span:nth-child(6) {
animation-delay: 15s;
color: #6b969d;
}
#keyframes rotateWord {
0% { opacity: 0; max-width: 0;}
2% { opacity: 0; max-width: 0; transform: translateY(-30px); }
5% { opacity: 1; max-width: 200px; transform: translateY(5px);}
17% { opacity: 1; max-width: 200px; transform: translateY(5px); }
20% { opacity: 0; max-width: 0; transform: translateY(30px); }
80% { opacity: 0; max-width: 0; }
100% { opacity: 0; max-width: 0; }
}
#media screen and (max-width: 768px){
.rw-sentence { font-size: 18px; }
}
#media screen and (max-width: 320px){
.rw-sentence { font-size: 9px; }
}
It’s a little bit hacky, but it works! No JS required.
I removed the position: absolute and added max-width to the animation. Presto!


Here's a solution that uses JavaScript:
Example Fiddle
Here's the code that runs it:
JavaScript
var spans = document.querySelectorAll('.rw-words span'),
maxwidth = 0,
words = document.querySelector('.rw-words');
for (var i=0,l=spans.length;i<l;i++){
console.log(i + ' width: ' + spans[i].offsetWidth)
maxwidth = spans[i].offsetWidth > maxwidth ? spans[i].offsetWidth : maxwidth;
}
words.style.width = maxwidth + 'px'
CSS
.rw-words{
display: inline-block;
vertical-align: top;
text-indent: 2px;
}
EDIT
Here's some much cleaner JavaScript that achieves the same thing:
var spans = [].slice.call(document.querySelectorAll('.rw-words span')),
words = document.querySelector('.rw-words'),
maxwidth = Math.max.apply(null, spans.map(function (item) {
return item.offsetWidth;
}));
words.style.width = maxwidth + 'px'


Set the width to the width of the largest element
var rwWords = document.querySelector('.rw-words-1');
var largest = [].slice.call(rwWords.querySelectorAll('span')).reduce(function (acc, el) {
var len = el.textContent.trim().length;
var cur = acc.textContent.trim().length;
return len > cur ? el : acc;
});
rwWords.style.width = window.getComputedStyle(largest).width;
and center the words with
transform: translate(-50%, 0);
JSFiddle Demo: http://jsfiddle.net/e697j5p2/1/

Related

Word-Wrap Vertical Sliding Text Animation

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>

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.

Sentence with scrolling text and overlapping div

I am trying to make scrolling text in the middle of a sentence with html and css. How do I make the second half of the sentence responsive to the scrolling text? I'm sure responsive is not even the correct phrase, but hopefully you will see what I mean..be nice, i'm learning! :)
I really think that should be enough detail on the issue but i'm trying to satisfy the minimum word count.
Thanks
/*Sentence*/
.sentence{
color: #ff8800;
font-size: 30px;
text-align: left;
display: inline;
}
/*Wrapper*/
.wrapper{
font-family: 'Raleway', sans-serif;
margin: 100px auto;
padding: 40px 40px;
position: relative;
width: 100%;
}
/*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: #ff8800;
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;
}
/*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; }
}
<html>
<section class="wrapper">
<h2 class="sentence">number
<div class="slidingVertical">
<span>one</span>
<span>two</span>
<span>three</span>
<span>four</span>
</div>
</h2>
<h2 class="sentence">is the best</h2>
</section>
</html>

We need to add display: inline-block for .sentence and .slidingVertical.
For display: inline, margin and padding are neglected.
.sentence {
color: #ff8800;
font-size: 30px;
text-align: left;
display: inline-block;
}
.slidingVertical {
display: inline-block;
}

How to correctly wrap animated word cycle?

How can I make this animated word cycle (made up of absolute positioned spans) 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>
View the CodePen.

Don't make all the words position:absolute. Keep one of them position:relative (the longest one) so you can have a correct wrapping:
/*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-block;
position:relative; /* added */
vertical-align: text-top; /* added */
}
.slidingVertical span {
animation: topToBottom 12.5s linear infinite 0s;
color: #00abe9;
opacity: 0;
overflow: hidden;
position: absolute;
left:0; /* added */
}
/* added */
.slidingVertical span:nth-child(4) {
position:relative;
display:inline-block;
}
/**/
.slidingVertical span:nth-child(2) {
animation-delay: 2.5s;
}
.slidingVertical span:nth-child(3) {
animation-delay: 5s;
}
.slidingVertical span:nth-child(4) {
animation-delay: 7.5s;
}
.slidingVertical span:nth-child(5) {
animation-delay: 10s;
}
/*topToBottom Animation*/
#keyframes topToBottom {
0% {
opacity: 0;
}
5% {
opacity: 0;
transform: translateY(-50px);
}
10% {
opacity: 1;
transform: translateY(0px);
}
25% {
opacity: 1;
transform: translateY(0px);
}
30% {
opacity: 0;
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>

How do I center this text animation?

Super new to text animation and coding in general - so apologies in advance! I'm currently trying to center this entire text animation on a header section of a website. I've been playing around with the css, but I'm having a hard time getting it to look centered and stay horizontal and look nice on mobile. Any advice or info would be great :) Thanks so much!
Here it is!
https://codepen.io/kamwam/pen/PoYzNqw
.rw-wrapper {
width: 80%;
position: absolute;
text-align: center;
margin: 110px auto 0 auto;
font-family: 'Playfair Display';
font-weight: 600;
padding: 10px;
}
.after {
margin-left: 134px;
}
.rw-sentence {
margin: 0;
text-align: left;
text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.8);
}
.rw-sentence span {
color: #333;
font-size: 200%;
font-weight: 400;
}
.rw-words {
display: inline;
text-indent: 10px;
}
.rw-words-1 span {
position: absolute;
opacity: 0;
overflow: hidden;
color: #0076bb;
-webkit-animation: rotateWord 18s linear infinite 0s;
-ms-animation: rotateWord 18s linear infinite 0s;
animation: rotateWord 18s linear infinite 0s;
}
.rw-words-1 span:nth-child(2) {
-webkit-animation-delay: 3s;
-ms-animation-delay: 3s;
animation-delay: 3s;
color: #0076bb;
}
.rw-words-1 span:nth-child(3) {
-webkit-animation-delay: 6s;
-ms-animation-delay: 6s;
animation-delay: 6s;
color: #0076bb;
}
.rw-words-1 span:nth-child(4) {
-webkit-animation-delay: 9s;
-ms-animation-delay: 9s;
animation-delay: 9s;
color: #0076bb;
}
.rw-words-1 span:nth-child(5) {
-webkit-animation-delay: 12s;
-ms-animation-delay: 12s;
animation-delay: 12s;
color: #0076bb;
}
.rw-words-1 span:nth-child(6) {
-webkit-animation-delay: 15s;
-ms-animation-delay: 15s;
animation-delay: 15s;
color: #0076bb;
}
#-webkit-keyframes rotateWord {
0% {
opacity: 0;
}
2% {
opacity: 0;
-webkit-transform: translateY(-30px);
}
5% {
opacity: 1;
-webkit-transform: translateY(0px);
}
17% {
opacity: 1;
-webkit-transform: translateY(0px);
}
20% {
opacity: 0;
-webkit-transform: translateY(30px);
}
80% {
opacity: 0;
}
100% {
opacity: 0;
}
}
#-ms-keyframes rotateWord {
0% {
opacity: 0;
}
2% {
opacity: 0;
-ms-transform: translateY(-30px);
}
5% {
opacity: 1;
-ms-transform: translateY(0px);
}
17% {
opacity: 1;
-ms-transform: translateY(0px);
}
20% {
opacity: 0;
-ms-transform: translateY(30px);
}
80% {
opacity: 0;
}
100% {
opacity: 0;
}
}
#keyframes rotateWord {
0% {
opacity: 0;
}
2% {
opacity: 0;
-webkit-transform: translateY(-30px);
transform: translateY(-30px);
}
5% {
opacity: 1;
-webkit-transform: translateY(0px);
transform: translateY(0px);
}
17% {
opacity: 1;
-webkit-transform: translateY(0px);
transform: translateY(0px);
}
20% {
opacity: 0;
-webkit-transform: translateY(30px);
transform: translateY(30px);
}
80% {
opacity: 0;
}
100% {
opacity: 0;
}
}
#media screen and (max-width: 768px) {
.rw-sentence {
font-size: 18px;
}
}
#media screen and (max-width: 320px) {
.rw-sentence {
font-size: 9px;
}
}
<link href='https://fonts.googleapis.com/css?family=Playfair Display' rel='stylesheet' type='text/css'>
<section class="rw-wrapper">
<div class="rw-sentence">
<span>Ties made for your</span>
<div class="rw-words rw-words-1">
<span>outdoor</span>
<span>modern</span>
<span>vintage</span>
<span>garden</span>
<span>nautical</span>
<span>modern</span>
</div>
<span class="after"> wedding</span>
</div>
</section>

I forked your pen here.
I removed most margin and padding and here is what I have (I commented what I did in the code) :
.rw-sentence {
text-align: left;
text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.8);
/* max-content make the width fit the content "at is largest" (without wrap) */
/* this allow margin: 0 auto; to center it without white space
(It fit the box to the text and center the box) */
width: max-content;
margin: 0 auto;
/* This is also necessary, otherwise you'd have to compensate for the difference
in height with the container one way or another */
height: 100%;
}
.rw-sentence span {
color: #333;
font-size: 200%;
/* I fiddled to find the right line height to fit the height of the container */
/* not sure that's "best practice" but it work :) */
line-height: 140%;
font-weight: 400;
}
Edit
Read afterward about the responsive issue.
html {
/* define a root font-size */
/* using unit like vw (a % of the width of the viewport
or vmax (a % of the largest between the height and width of the viewport
can make your design more fluid as it will adjust with the device viewport */
font-size: 16px;
}
/* I set this container font-size to "1 time the root font-size"
The font size in your span (200%) is 200% of this font-size here
If you use 'rem' for other length (like width, height ..) it will still
be representing the root font-size (here x time 16px) */
.rw-sentence {
font-size: 1rem;
/* This is the values I chose for the media queries but feel free to
play around with those values, trying 'vw', 'vmax', using rem ...*/
#media screen and (max-width: 860px) {
html {
font-size: 10px;
}
}
#media screen and (max-width: 400px) {
html {
font-size: 8px;
}
}

you have to just edit the following css code
.rw-sentence {
text-align: center;
}
#media screen and (max-width: 768px) {
.rw-sentence {
font-size: 16px;
}
}
#media screen and (max-width: 320px) {
.rw-sentence {
font-size: 12px;
}
}
and never use font size less then 12px in mobile view.

Apply Flexbox layout to the .rw-wrapper div. Then the contents can easily be centered using align-items and justify-content.
.rw-wrapper {
display: flex; /* turn this into a `flexbox` container */
align-items: center; /* aligns content vertically */
justify-content: center; /* aligns content horizontally */
}
A great resource on Flexbox: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
.rw-wrapper {
border: 1px solid blue; /* just so you can see the div in question easier, remove this */
display: flex; /* turn this into a `flexbox` container */
align-items: center; /* aligns content vertically */
justify-content: center; /* aligns content horizontally */
width: 80%;
position: absolute;
text-align: center;
margin: 110px auto 0 auto;
font-family: 'Playfair Display';
font-weight: 600;
padding: 10px;
}
.after {
margin-left: 134px;
}
.rw-sentence {
margin: 0;
text-align: left;
text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.8);
}
.rw-sentence span {
color: #333;
font-size: 200%;
font-weight: 400;
}
.rw-words {
display: inline;
text-indent: 10px;
}
.rw-words-1 span {
position: absolute;
opacity: 0;
overflow: hidden;
color: #0076bb;
-webkit-animation: rotateWord 18s linear infinite 0s;
-ms-animation: rotateWord 18s linear infinite 0s;
animation: rotateWord 18s linear infinite 0s;
}
.rw-words-1 span:nth-child(2) {
-webkit-animation-delay: 3s;
-ms-animation-delay: 3s;
animation-delay: 3s;
color: #0076bb;
}
.rw-words-1 span:nth-child(3) {
-webkit-animation-delay: 6s;
-ms-animation-delay: 6s;
animation-delay: 6s;
color: #0076bb;
}
.rw-words-1 span:nth-child(4) {
-webkit-animation-delay: 9s;
-ms-animation-delay: 9s;
animation-delay: 9s;
color: #0076bb;
}
.rw-words-1 span:nth-child(5) {
-webkit-animation-delay: 12s;
-ms-animation-delay: 12s;
animation-delay: 12s;
color: #0076bb;
}
.rw-words-1 span:nth-child(6) {
-webkit-animation-delay: 15s;
-ms-animation-delay: 15s;
animation-delay: 15s;
color: #0076bb;
}
#-webkit-keyframes rotateWord {
0% {
opacity: 0;
}
2% {
opacity: 0;
-webkit-transform: translateY(-30px);
}
5% {
opacity: 1;
-webkit-transform: translateY(0px);
}
17% {
opacity: 1;
-webkit-transform: translateY(0px);
}
20% {
opacity: 0;
-webkit-transform: translateY(30px);
}
80% {
opacity: 0;
}
100% {
opacity: 0;
}
}
#-ms-keyframes rotateWord {
0% {
opacity: 0;
}
2% {
opacity: 0;
-ms-transform: translateY(-30px);
}
5% {
opacity: 1;
-ms-transform: translateY(0px);
}
17% {
opacity: 1;
-ms-transform: translateY(0px);
}
20% {
opacity: 0;
-ms-transform: translateY(30px);
}
80% {
opacity: 0;
}
100% {
opacity: 0;
}
}
#keyframes rotateWord {
0% {
opacity: 0;
}
2% {
opacity: 0;
-webkit-transform: translateY(-30px);
transform: translateY(-30px);
}
5% {
opacity: 1;
-webkit-transform: translateY(0px);
transform: translateY(0px);
}
17% {
opacity: 1;
-webkit-transform: translateY(0px);
transform: translateY(0px);
}
20% {
opacity: 0;
-webkit-transform: translateY(30px);
transform: translateY(30px);
}
80% {
opacity: 0;
}
100% {
opacity: 0;
}
}
#media screen and (max-width: 768px) {
.rw-sentence {
font-size: 18px;
}
}
#media screen and (max-width: 320px) {
.rw-sentence {
font-size: 9px;
}
}
<link href='https://fonts.googleapis.com/css?family=Playfair Display' rel='stylesheet' type='text/css'>
<section class="rw-wrapper">
<div class="rw-sentence">
<span>Ties made for your</span>
<div class="rw-words rw-words-1">
<span>outdoor</span>
<span>modern</span>
<span>vintage</span>
<span>garden</span>
<span>nautical</span>
<span>modern</span>
</div>
<span class="after"> wedding</span>
</div>
</section>

You could use CSS Grid for this, all you need to change in your code is as below and it will work!
.rw-wrapper {
display: grid;
width: 100%;
height: 100vh;
}
.rw-sentence {
margin: auto;
max-width: 300px;
text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.8);
}
Happy coding. :)

Use left: 50%; with transform: translateX(-50%); to center the absolutely positioned element regardless of its width. And do not mention any width for <section class="rw-wrapper">.
Also, you don't have to reduce font-size so drastically for mobile resolutions. I Have not reduced it at all. See below:
.rw-wrapper {
position: absolute;
left: 50%;
transform: translateX(-50%);
top: 110px;
font-family: 'Playfair Display';
font-weight: 600;
padding: 10px;
}
.after {
margin-left: 134px;
}
.rw-sentence {
margin: 0;
text-align: center;
text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.8);
}
.rw-sentence span {
color: #333;
font-size: 200%;
font-weight: 400;
}
.rw-words {
display: inline;
text-indent: 10px;
}
.rw-words-1 span {
position: absolute;
opacity: 0;
overflow: hidden;
color: #0076bb;
-webkit-animation: rotateWord 18s linear infinite 0s;
-ms-animation: rotateWord 18s linear infinite 0s;
animation: rotateWord 18s linear infinite 0s;
}
.rw-words-1 span:nth-child(2) {
-webkit-animation-delay: 3s;
-ms-animation-delay: 3s;
animation-delay: 3s;
color: #0076bb;
}
.rw-words-1 span:nth-child(3) {
-webkit-animation-delay: 6s;
-ms-animation-delay: 6s;
animation-delay: 6s;
color: #0076bb;
}
.rw-words-1 span:nth-child(4) {
-webkit-animation-delay: 9s;
-ms-animation-delay: 9s;
animation-delay: 9s;
color: #0076bb;
}
.rw-words-1 span:nth-child(5) {
-webkit-animation-delay: 12s;
-ms-animation-delay: 12s;
animation-delay: 12s;
color: #0076bb;
}
.rw-words-1 span:nth-child(6) {
-webkit-animation-delay: 15s;
-ms-animation-delay: 15s;
animation-delay: 15s;
color: #0076bb;
}
#-webkit-keyframes rotateWord {
0% {
opacity: 0;
}
2% {
opacity: 0;
-webkit-transform: translateY(-30px);
}
5% {
opacity: 1;
-webkit-transform: translateY(0px);
}
17% {
opacity: 1;
-webkit-transform: translateY(0px);
}
20% {
opacity: 0;
-webkit-transform: translateY(30px);
}
80% {
opacity: 0;
}
100% {
opacity: 0;
}
}
#-ms-keyframes rotateWord {
0% {
opacity: 0;
}
2% {
opacity: 0;
-ms-transform: translateY(-30px);
}
5% {
opacity: 1;
-ms-transform: translateY(0px);
}
17% {
opacity: 1;
-ms-transform: translateY(0px);
}
20% {
opacity: 0;
-ms-transform: translateY(30px);
}
80% {
opacity: 0;
}
100% {
opacity: 0;
}
}
#keyframes rotateWord {
0% {
opacity: 0;
}
2% {
opacity: 0;
-webkit-transform: translateY(-30px);
transform: translateY(-30px);
}
5% {
opacity: 1;
-webkit-transform: translateY(0px);
transform: translateY(0px);
}
17% {
opacity: 1;
-webkit-transform: translateY(0px);
transform: translateY(0px);
}
20% {
opacity: 0;
-webkit-transform: translateY(30px);
transform: translateY(30px);
}
80% {
opacity: 0;
}
100% {
opacity: 0;
}
}
#media screen and (min-width: 576px) {
.rw-wrapper {
white-space: nowrap;
}
}
<link href='https://fonts.googleapis.com/css?family=Playfair Display' rel='stylesheet' type='text/css'>
<section class="rw-wrapper">
<div class="rw-sentence">
<span>Ties made for your</span>
<div class="rw-words rw-words-1">
<span>outdoor</span>
<span>modern</span>
<span>vintage</span>
<span>garden</span>
<span>nautical</span>
<span>modern</span>
</div>
<span class="after"> wedding</span>
</div>
</section>

Try this.
Update this CSS
rw-sentence #Class
.rw-sentence {
margin: 0;
text-align: center;;
text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.8);
}

I would recomend using style="margin-left: 10px" just inside your <span> so that it looks like:
<span style="margin-left: 10px">
And then just change the ten pixels until the text is centered. I tried to use align='center' and text-align but they do not work.

animation not positioned correctly

I'm trying to do an animation with the next code:
.slogan {
width: 73.5%;
color: black;
}
.left-slogan {
font-size: 7vw;
font-weight: bold;
}
.left-slogan > p {
line-height: 0;
}
.left-slogan {
text-align: right;
margin-right: 24px;
}
.right-slogan span {
position: absolute;
opacity: 0;
overflow: hidden;
color: black;
font-size: 7vw;
font-weight: bold;
-webkit-animation: rotateWord 15s linear infinite 0s;
-ms-animation: rotateWord 15s linear infinite 0s;
animation: rotateWord 15s linear infinite 0s;
}
.right-slogan span:nth-child(1) {
-webkit-animation-delay: 0s;
-ms-animation-delay: 0s;
animation-delay: 0s;
}
.right-slogan span:nth-child(2) {
-webkit-animation-delay: 3s;
-ms-animation-delay: 3s;
animation-delay: 3s;
}
.right-slogan span:nth-child(3) {
-webkit-animation-delay: 6s;
-ms-animation-delay: 6s;
animation-delay: 6s;
}
.right-slogan span:nth-child(4) {
-webkit-animation-delay: 9s;
-ms-animation-delay: 9s;
animation-delay: 9s;
}
.right-slogan span:nth-child(5) {
-webkit-animation-delay: 12s;
-ms-animation-delay: 12s;
animation-delay: 12s;
}
#-webkit-keyframes rotateWord {
0% {
opacity: 0;
}
2% {
opacity: 0;
-webkit-transform: translateY(-30px);
}
5% {
opacity: 1;
-webkit-transform: translateY(0px);
}
17% {
opacity: 1;
-webkit-transform: translateY(0px);
}
20% {
opacity: 0;
-webkit-transform: translateY(30px);
}
80% {
opacity: 0;
}
100% {
opacity: 0;
}
}
#-ms-keyframes rotateWord {
0% {
opacity: 0;
}
2% {
opacity: 0;
-ms-transform: translateY(-30px);
}
5% {
opacity: 1;
-ms-transform: translateY(0px);
}
17% {
opacity: 1;
-ms-transform: translateY(0px);
}
20% {
opacity: 0;
-ms-transform: translateY(30px);
}
80% {
opacity: 0;
}
100% {
opacity: 0;
}
}
#keyframes rotateWord {
0% {
opacity: 0;
}
2% {
opacity: 0;
-webkit-transform: translateY(-30px);
transform: translateY(-30px);
}
5% {
opacity: 1;
-webkit-transform: translateY(0px);
transform: translateY(0px);
}
17% {
opacity: 1;
-webkit-transform: translateY(0px);
transform: translateY(0px);
}
20% {
opacity: 0;
-webkit-transform: translateY(30px);
transform: translateY(30px);
}
80% {
opacity: 0;
}
100% {
opacity: 0;
}
}
<div class="slogan">
<div class="left-slogan">
<p>We are
<div class="right-slogan">
<span id="aux-word">testing</span>
<span id="aux-word">experiencing</span>
<span id="aux-word">checking</span>
<span id="aux-word">solving</span>
</div>
</p>
<p>a bug</p>
</div>
</div>
For any reason, the animated text is not positioned at the right side of the words "We are" even though it's animated.
Could anybody make me know how to solve it?
Thanks in advice

The right-slogan div is acting as a block element. If you can make this a span instead, it will layout inline with the other text. A couple other CSS tweaks below to get things laid out nicely (removed the overflow:hidden and added a margin-left).
.slogan {
width: 73.5%;
color: black;
}
.left-slogan {
font-size: 7vw;
font-weight: bold;
}
.left-slogan > p {
line-height: 0;
}
.left-slogan {
text-align: right;
margin-right: 24px;
}
.right-slogan span {
position: absolute;
opacity: 0;
margin-left: 10px;
color: black;
font-size: 7vw;
font-weight: bold;
-webkit-animation: rotateWord 15s linear infinite 0s;
-ms-animation: rotateWord 15s linear infinite 0s;
animation: rotateWord 15s linear infinite 0s;
}
.right-slogan span:nth-child(1) {
-webkit-animation-delay: 0s;
-ms-animation-delay: 0s;
animation-delay: 0s;
}
.right-slogan span:nth-child(2) {
-webkit-animation-delay: 3s;
-ms-animation-delay: 3s;
animation-delay: 3s;
}
.right-slogan span:nth-child(3) {
-webkit-animation-delay: 6s;
-ms-animation-delay: 6s;
animation-delay: 6s;
}
.right-slogan span:nth-child(4) {
-webkit-animation-delay: 9s;
-ms-animation-delay: 9s;
animation-delay: 9s;
}
.right-slogan span:nth-child(5) {
-webkit-animation-delay: 12s;
-ms-animation-delay: 12s;
animation-delay: 12s;
}
#-webkit-keyframes rotateWord {
0% {
opacity: 0;
}
2% {
opacity: 0;
-webkit-transform: translateY(-30px);
}
5% {
opacity: 1;
-webkit-transform: translateY(0px);
}
17% {
opacity: 1;
-webkit-transform: translateY(0px);
}
20% {
opacity: 0;
-webkit-transform: translateY(30px);
}
80% {
opacity: 0;
}
100% {
opacity: 0;
}
}
#-ms-keyframes rotateWord {
0% {
opacity: 0;
}
2% {
opacity: 0;
-ms-transform: translateY(-30px);
}
5% {
opacity: 1;
-ms-transform: translateY(0px);
}
17% {
opacity: 1;
-ms-transform: translateY(0px);
}
20% {
opacity: 0;
-ms-transform: translateY(30px);
}
80% {
opacity: 0;
}
100% {
opacity: 0;
}
}
#keyframes rotateWord {
0% {
opacity: 0;
}
2% {
opacity: 0;
-webkit-transform: translateY(-30px);
transform: translateY(-30px);
}
5% {
opacity: 1;
-webkit-transform: translateY(0px);
transform: translateY(0px);
}
17% {
opacity: 1;
-webkit-transform: translateY(0px);
transform: translateY(0px);
}
20% {
opacity: 0;
-webkit-transform: translateY(30px);
transform: translateY(30px);
}
80% {
opacity: 0;
}
100% {
opacity: 0;
}
}
<div class="slogan">
<div class="left-slogan">
<p>We are
<span class="right-slogan">
<span id="aux-word">testing</span>
<span id="aux-word">experiencing</span>
<span id="aux-word">checking</span>
<span id="aux-word">solving</span>
</span>
</p>
<p>a bug</p>
</div>
</div>

Make some changes as follows:
#-webkit-keyframes rotateWord {
0% {
opacity: 0;
}
2% {
opacity: 0;
-webkit-transform: translateY(-200%);
}
5% {
opacity: 1;
-webkit-transform: translateY(-180%);
}
17% {
opacity: 1;
-webkit-transform: translateY(-140%);
}
20% {
opacity: 0;
-webkit-transform: translateY(-140%);
}
80% {
opacity: 0;
}
100% {
opacity: 0;
}
}
Add a white space between "We are" and the animated text:
<span id="aux-word"> testing</span>
<span id="aux-word"> experiencing</span>
<span id="aux-word"> checking</span>
<span id="aux-word"> solving</span>

Make following changes in CSS to overwrite default browser css
body {
margin: 0px; // to overwrite any margin given by browsers
}
.left-slogan > p { // removed line-height style
-webkit-margin-after: 0px; // to overwrite any margin given by webkit browsers
-webkit-margin-before: 0px;
}
.right-slogan span {
position: absolute;
opacity: 0;
overflow: hidden;
color: black;
font-size: 7vw;
font-weight: bold;
-webkit-animation: rotateWord 15s linear infinite 0s;
-ms-animation: rotateWord 15s linear infinite 0s;
animation: rotateWord 15s linear infinite 0s;
top: 0; // added top position to zero
}