CODEWITHSUNDEEP
htmlcssanimation
Joaquin Heredia
Joaquin Heredia

Reputation: 43

Why does text align property slows down text animation?

This is my very first question on this site so any suggestion about how to redact future ones, will be gratefully accepted.

Right now I have a text that is displayed from left to right as in a marquee, with an animation that scrolls the words in 30 seconds.

My problem is that even though the animation does what I want, it behaves weirdly with the speed of the animation, when the text is not fully displayed on the marquee, it will go at a constant speed, but as soon as the end of the text is reached, then it will slow down the animation in a very noticeable way.

This is the code I have right now:

HTML:

<div>  
  <p id="text" class="marquee smart-stops-small">{A-B}</p>
</div>
<div>
  <p id="text" class="marquee smart-stops-small">{A-B-C-D-E-F-G-H-I-J-K-etc.}</p>
</div>

CSS:

.smart-stops-small{
  font-size: 1.9em;
  text-align: center;
  line-height: 3.8em;
  display: block; /* Fallback for non-webkit */
  display: -webkit-box;
  max-width: 400px;
  height: 3.8em; /* Fallback for non-webkit */
  margin: 0 auto;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Make it a marquee */
.marquee {
    margin: 0 auto;
    overflow: hidden;
    white-space: nowrap;
    box-sizing: border-box;
    animation: marquee 30s linear infinite;
}

/* Make it move */
@keyframes marquee {
    0%   { text-indent: 15em }
    100% { text-indent: -55em }
}

I have created a Fiddle with the HTML and CSS that I have: https://jsfiddle.net/zkv1t4g6/1/

EDIT:

After touching a little bit the CSS class of smart-stops-small I've found out that the thing that breaks the animation is the text-align property

This updated fiddle shows it: https://jsfiddle.net/zkv1t4g6/2/

EDIT 2:

In the last fiddle I deleted most of the properties of the class, in this one the only one that's deleted is the text-align: center; and it seems that the animation works just fine: https://jsfiddle.net/zkv1t4g6/3/

Now, the question changes, I want to know why the text align interferes with the speed of the animation. What is the interaction between those two?

Thanks!

Upvotes: 4

Views: 223

Answers (3)

Andi North
Andi North

Reputation: 897

If you're looking for a very smooth transition, you should look to the transform property. Here's an example of your marquee using transform: https://jsfiddle.net/8o335a6r/

(I've added a grey background to the marquee contents so you can see how the marquee is moving).

The main change:

.smart-stops-small{
  font-size: 1.9em;
  text-overflow: ellipsis;
  text-align: center;
  background: #CCC;
}


.marquee {
  overflow: hidden;
  white-space: nowrap;
  box-sizing: border-box;
}


.marquee__scroll {
  transform: translateX(100%);
  animation: marquee 10s linear infinite;
}

@keyframes marquee {
  0%   { transform: translateX(100%); }
  100% { transform: translateX(-100%); }
}
<div class="marquee">
  <div class="marquee__scroll">
    <p class="marquee__content  smart-stops-small">A B C D E F G H I J K L M etc</p>
  </div>
</div>

Why use transform?

Using the CSS3 translate value means that your animation will utilise subpixel anti-aliasing, which means that instead of moving the item one pixel at a time, the browser can move elements in many more steps, making for a smoother transition.

Translations (using translate) are also performed in their own layer in the browser window which means the browser doesn't need to repaint the screen so often, leading to greatly improved rendering performance, particularly on mobile devices.

Upvotes: 1

Hunter Turner
Hunter Turner

Reputation: 6894

This is happening because you're assigning text-align: center; to your <div> that is being animated. Remove this line and the animation will flow smoothly.

CSS

.smart-stops-small{
  font-size: 1.9em;
  text-align: center; /* <-- Remove */
  line-height: 3.8em;
  ...
}

JSFiddle

Upvotes: 1

arhak
arhak

Reputation: 2542

right now don't have much time for the actual rationale behind it, but I cant tell you what causes it: -webkit-box-orient: vertical;

.smart-stops-small{
  font-size: 1.9em;
  text-align: center;
  line-height: 3.8em;
  display: block; /* Fallback for non-webkit */
  display: -webkit-box;
  max-width: 400px;
  height: 3.8em; /* Fallback for non-webkit */
  margin: 0 auto;
  -webkit-line-clamp: 2;
  /*-webkit-box-orient: vertical;*/
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Make it a marquee */
.marquee {
    margin: 0 auto;
    overflow: hidden;
    white-space: nowrap;
    box-sizing: border-box;
    animation: marquee 30s linear infinite;
}

/* Make it move */
@keyframes marquee {
    0%   { text-indent: 15em }
    100% { text-indent: -55em }
}
<div>  
  <p id="text" class="marquee smart-stops-small">{A-B}</p>
</div>
<div>
  <p id="text" class="marquee smart-stops-small">{A-B-C-D-E-F-G-H-I-J-K-etc.}</p>
</div>

Upvotes: 1

Related Questions