Text Animation Glitches on Small Screens - html

Question

Looking at the following codepen: https://codepen.io/codeams/pen/Ksbcz, I noticed that the animation would glitch if you shrank the window (i.e., the text wraps upon expanding letter-spacing).
h1 letter-spacing animation
body, h1{
margin: 0;
padding: 0;
}
body{
width: 100%;
height: 100%;
background: #30252E;
color: #f0f0f0;
}
h1{
width: 100%;
height: 42px;
position: absolute;
top: calc(50% - 21px);
left: 0;
text-transform: uppercase;
text-align: center;
font: 300 #{42px}/#{1} 'Open sans condensed', sans-serif;
opacity: 0;
animation: in 3s ease-out forwards infinite;
animation-delay: 1s;
}
#keyframes in{
0%{
letter-spacing: -17px;
opacity: 0;
}
30%{
letter-spacing: 4px;
opacity: 1;
}
100%{
letter-spacing: 4px;
opacity: 1;
}
}
How could I do it so that from the screen-size, I would split the words myself and perform the proper animation?

Answer 1

You could place a <span> in between the text and set display:block for the span at the required screen resolution using the media query.
body, h1{
margin: 0;
padding: 0;
}
body{
width: 100%;
height: 100%;
background: #30252E;
color: #f0f0f0;
}
h1{
width: 100%;
height: 42px;
position: absolute;
top: calc(50% - 21px);
left: 0;
text-transform: uppercase;
text-align: center;
font: 300 #{42px}/#{1} 'Open sans condensed', sans-serif;
opacity: 0;
animation: in 3s ease-out forwards infinite;
animation-delay: 1s;
}
#keyframes in{
0%{
letter-spacing: -17px;
opacity: 0;
}
30%{
letter-spacing: 4px;
opacity: 1;
}
100%{
letter-spacing: 4px;
opacity: 1;
}
}
#media only screen and (max-width: 600px) {
span{
display:block; /*Will break the text to next line at screen size 600px*/
}
}
<h1> letter-spacing<span></span> animation</h1>

Answer 2

Letter-spacing doesn't animate at 60fps so it won't appear buttery smooth when animating. The CSS properties that give you smooth animations (60fps) are:
/*postion*/
transform: translate(value, value)
/*scale*/
transform: scale(n)
/*rotation*/
transform: rotate(deg)
/*opacity*/
opacity: 0 though to 1
Any other values will suffer from 'jank' in one form or another. Most of the stuff people try and animate with other properties can be achieved with the 60fps properties though.