江阴网站建设,江阴网站制作,江阴网站设计,江阴SEO优化,江阴小程序开发-江阴雨辰互联

  1. JustNews 首页
  2. questions

Text wrap on CSS Animation - Stack Overflow

admin••questions•阅读4

I have a strange glitch on my CSS animation that breaks up the words.I like the animation effect but t

I have a strange glitch on my CSS animation that breaks up the words.

I like the animation effect but this is breaking it. It happens for any phrases I try.

FYI, it'll be a static bit of text.

Example:.

Why is this and how do I fix this?

JSFiddle: /

body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #111;
    color: white;
    font-family: Arial, sans-serif;
    padding: 100px;
    text-align: center;
}

.heading {
    display: inline-flex; /* Allows wrapping */
    flex-wrap: wrap; /* Ensures words break normally */
    font-size: 2rem;
    font-weight: bold;
    opacity: 0;
    transform: translateY(10px);
    animation: fadeUp 1s forwards ease-out;
    max-width: 90%;
    word-wrap: break-word;
}

@keyframes fadeUp {
    0% {
        opacity: 0;
        transform: translateY(10px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.letter {
    display: inline; /* Now acts like normal text */
    opacity: 0;
    animation: fadeLetter 0.2s forwards ease-out;
}

.space {
    display: inline; /* Allows wrapping */
    width: 0.3em; /* Keeps spacing correct */
}

@keyframes fadeLetter {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

/* Generate delays for all 35 characters */
.letter:nth-child(1)  { animation-delay: 0.02s; }
.letter:nth-child(2)  { animation-delay: 0.04s; }
.letter:nth-child(3)  { animation-delay: 0.06s; }
.letter:nth-child(4)  { animation-delay: 0.08s; }
.letter:nth-child(5)  { animation-delay: 0.1s; }
.letter:nth-child(6)  { animation-delay: 0.12s; }
.letter:nth-child(7)  { animation-delay: 0.14s; }
.letter:nth-child(8)  { animation-delay: 0.16s; }
.letter:nth-child(9)  { animation-delay: 0.18s; }
.letter:nth-child(10) { animation-delay: 0.2s; }
.letter:nth-child(11) { animation-delay: 0.22s; }
.letter:nth-child(12) { animation-delay: 0.24s; }
.letter:nth-child(13) { animation-delay: 0.26s; }
.letter:nth-child(14) { animation-delay: 0.28s; }
.letter:nth-child(15) { animation-delay: 0.3s; }
.letter:nth-child(16) { animation-delay: 0.32s; }
.letter:nth-child(17) { animation-delay: 0.34s; }
.letter:nth-child(18) { animation-delay: 0.36s; }
.letter:nth-child(19) { animation-delay: 0.38s; }
.letter:nth-child(20) { animation-delay: 0.4s; }
.letter:nth-child(21) { animation-delay: 0.42s; }
.letter:nth-child(22) { animation-delay: 0.44s; }
.letter:nth-child(23) { animation-delay: 0.46s; }
.letter:nth-child(24) { animation-delay: 0.48s; }
.letter:nth-child(25) { animation-delay: 0.5s; }
.letter:nth-child(26) { animation-delay: 0.52s; }
.letter:nth-child(27) { animation-delay: 0.54s; }
.letter:nth-child(28) { animation-delay: 0.56s; }
.letter:nth-child(29) { animation-delay: 0.58s; }
.letter:nth-child(30) { animation-delay: 0.6s; }
.letter:nth-child(31) { animation-delay: 0.62s; }
.letter:nth-child(32) { animation-delay: 0.64s; }
.letter:nth-child(33) { animation-delay: 0.66s; }
.letter:nth-child(34) { animation-delay: 0.68s; }
.letter:nth-child(35) { animation-delay: 0.7s; }
.letter:nth-child(36) { animation-delay: 0.7s; }


h1 {
  font-size:68px!important;
  letter-spacing:-5px
}
<h1 class="heading">
    <span class="letter">B</span>
    <span class="letter">r</span>
    <span class="letter">i</span>
    <span class="letter">g</span>
    <span class="letter">h</span>
    <span class="letter">t</span>
    <span class="space"> </span>
    <span class="letter">i</span>
    <span class="letter">d</span>
    <span class="letter">e</span>
    <span class="letter">a</span>
    <span class="space"> </span>
    <span class="letter">i</span>
    <span class="letter">s</span>
    <span class="space"> </span>
    <span class="letter">a</span>
    <span class="letter">h</span>
    <span class="letter">e</span>
    <span class="letter">a</span>
    <span class="letter">d</span>
    <span class="space"> </span>
    <span class="letter">f</span>
    <span class="letter">o</span>
    <span class="letter">r</span>
    <span class="space"> </span>
    <span class="letter">G</span>
        <span class="letter">e</span>
        <span class="letter">n</span>
        <span class="letter">e</span>
        <span class="letter">r</span>
        <span class="letter">a</span>
        <span class="letter">t</span>
        <span class="letter">i</span>
        <span class="letter">o</span>
        <span class="letter">n</span>
</h1>

I have a strange glitch on my CSS animation that breaks up the words.

I like the animation effect but this is breaking it. It happens for any phrases I try.

FYI, it'll be a static bit of text.

Example:.

Why is this and how do I fix this?

JSFiddle: https://jsfiddle/ouxgm3aq/

body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #111;
    color: white;
    font-family: Arial, sans-serif;
    padding: 100px;
    text-align: center;
}

.heading {
    display: inline-flex; /* Allows wrapping */
    flex-wrap: wrap; /* Ensures words break normally */
    font-size: 2rem;
    font-weight: bold;
    opacity: 0;
    transform: translateY(10px);
    animation: fadeUp 1s forwards ease-out;
    max-width: 90%;
    word-wrap: break-word;
}

@keyframes fadeUp {
    0% {
        opacity: 0;
        transform: translateY(10px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.letter {
    display: inline; /* Now acts like normal text */
    opacity: 0;
    animation: fadeLetter 0.2s forwards ease-out;
}

.space {
    display: inline; /* Allows wrapping */
    width: 0.3em; /* Keeps spacing correct */
}

@keyframes fadeLetter {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

/* Generate delays for all 35 characters */
.letter:nth-child(1)  { animation-delay: 0.02s; }
.letter:nth-child(2)  { animation-delay: 0.04s; }
.letter:nth-child(3)  { animation-delay: 0.06s; }
.letter:nth-child(4)  { animation-delay: 0.08s; }
.letter:nth-child(5)  { animation-delay: 0.1s; }
.letter:nth-child(6)  { animation-delay: 0.12s; }
.letter:nth-child(7)  { animation-delay: 0.14s; }
.letter:nth-child(8)  { animation-delay: 0.16s; }
.letter:nth-child(9)  { animation-delay: 0.18s; }
.letter:nth-child(10) { animation-delay: 0.2s; }
.letter:nth-child(11) { animation-delay: 0.22s; }
.letter:nth-child(12) { animation-delay: 0.24s; }
.letter:nth-child(13) { animation-delay: 0.26s; }
.letter:nth-child(14) { animation-delay: 0.28s; }
.letter:nth-child(15) { animation-delay: 0.3s; }
.letter:nth-child(16) { animation-delay: 0.32s; }
.letter:nth-child(17) { animation-delay: 0.34s; }
.letter:nth-child(18) { animation-delay: 0.36s; }
.letter:nth-child(19) { animation-delay: 0.38s; }
.letter:nth-child(20) { animation-delay: 0.4s; }
.letter:nth-child(21) { animation-delay: 0.42s; }
.letter:nth-child(22) { animation-delay: 0.44s; }
.letter:nth-child(23) { animation-delay: 0.46s; }
.letter:nth-child(24) { animation-delay: 0.48s; }
.letter:nth-child(25) { animation-delay: 0.5s; }
.letter:nth-child(26) { animation-delay: 0.52s; }
.letter:nth-child(27) { animation-delay: 0.54s; }
.letter:nth-child(28) { animation-delay: 0.56s; }
.letter:nth-child(29) { animation-delay: 0.58s; }
.letter:nth-child(30) { animation-delay: 0.6s; }
.letter:nth-child(31) { animation-delay: 0.62s; }
.letter:nth-child(32) { animation-delay: 0.64s; }
.letter:nth-child(33) { animation-delay: 0.66s; }
.letter:nth-child(34) { animation-delay: 0.68s; }
.letter:nth-child(35) { animation-delay: 0.7s; }
.letter:nth-child(36) { animation-delay: 0.7s; }


h1 {
  font-size:68px!important;
  letter-spacing:-5px
}
<h1 class="heading">
    <span class="letter">B</span>
    <span class="letter">r</span>
    <span class="letter">i</span>
    <span class="letter">g</span>
    <span class="letter">h</span>
    <span class="letter">t</span>
    <span class="space"> </span>
    <span class="letter">i</span>
    <span class="letter">d</span>
    <span class="letter">e</span>
    <span class="letter">a</span>
    <span class="space"> </span>
    <span class="letter">i</span>
    <span class="letter">s</span>
    <span class="space"> </span>
    <span class="letter">a</span>
    <span class="letter">h</span>
    <span class="letter">e</span>
    <span class="letter">a</span>
    <span class="letter">d</span>
    <span class="space"> </span>
    <span class="letter">f</span>
    <span class="letter">o</span>
    <span class="letter">r</span>
    <span class="space"> </span>
    <span class="letter">G</span>
        <span class="letter">e</span>
        <span class="letter">n</span>
        <span class="letter">e</span>
        <span class="letter">r</span>
        <span class="letter">a</span>
        <span class="letter">t</span>
        <span class="letter">i</span>
        <span class="letter">o</span>
        <span class="letter">n</span>
</h1>

  • css
Share Improve this question edited Mar 11 at 9:30 Temani Afif 275k28 gold badges366 silver badges486 bronze badges asked Mar 11 at 9:16 michaelmcgurkmichaelmcgurk 6,53125 gold badges101 silver badges197 bronze badges 2
  • 1 you are using flexbox so you no more have text, it's a set of blocks with a letter inside them – Temani Afif Commented Mar 11 at 9:18
  • @TemaniAfif Think I've found a solution, will post shortly : ) – michaelmcgurk Commented Mar 11 at 9:19
Add a comment  | 

1 Answer 1

Reset to default 2
  • I removed spaces made with span and used real space
  • changed the display of heading

body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #111;
    color: white;
    font-family: Arial, sans-serif;
    padding: 100px;
    text-align: center;
}

.heading {
    display: inline-block; /* Changed from inline-flex */
    font-size: 2rem;
    font-weight: bold;
    opacity: 0;
    transform: translateY(10px);
    animation: fadeUp 1s forwards ease-out;
    max-width: 90%;
    word-wrap: normal; /* Ensure words break normally */
    white-space: normal; /* Reset any forced white-space handling */
}



@keyframes fadeUp {
    0% {
        opacity: 0;
        transform: translateY(10px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.letter {
    display: inline; /* Now acts like normal text */
    opacity: 0;
    animation: fadeLetter 0.2s forwards ease-out;
}

.space {
    display: inline; /* Allows wrapping */
    width: 0.3em; /* Keeps spacing correct */
}

@keyframes fadeLetter {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

/* Generate delays for all 35 characters */
.letter:nth-child(1)  { animation-delay: 0.02s; }
.letter:nth-child(2)  { animation-delay: 0.04s; }
.letter:nth-child(3)  { animation-delay: 0.06s; }
.letter:nth-child(4)  { animation-delay: 0.08s; }
.letter:nth-child(5)  { animation-delay: 0.1s; }
.letter:nth-child(6)  { animation-delay: 0.12s; }
.letter:nth-child(7)  { animation-delay: 0.14s; }
.letter:nth-child(8)  { animation-delay: 0.16s; }
.letter:nth-child(9)  { animation-delay: 0.18s; }
.letter:nth-child(10) { animation-delay: 0.2s; }
.letter:nth-child(11) { animation-delay: 0.22s; }
.letter:nth-child(12) { animation-delay: 0.24s; }
.letter:nth-child(13) { animation-delay: 0.26s; }
.letter:nth-child(14) { animation-delay: 0.28s; }
.letter:nth-child(15) { animation-delay: 0.3s; }
.letter:nth-child(16) { animation-delay: 0.32s; }
.letter:nth-child(17) { animation-delay: 0.34s; }
.letter:nth-child(18) { animation-delay: 0.36s; }
.letter:nth-child(19) { animation-delay: 0.38s; }
.letter:nth-child(20) { animation-delay: 0.4s; }
.letter:nth-child(21) { animation-delay: 0.42s; }
.letter:nth-child(22) { animation-delay: 0.44s; }
.letter:nth-child(23) { animation-delay: 0.46s; }
.letter:nth-child(24) { animation-delay: 0.48s; }
.letter:nth-child(25) { animation-delay: 0.5s; }
.letter:nth-child(26) { animation-delay: 0.52s; }
.letter:nth-child(27) { animation-delay: 0.54s; }
.letter:nth-child(28) { animation-delay: 0.56s; }
.letter:nth-child(29) { animation-delay: 0.58s; }
.letter:nth-child(30) { animation-delay: 0.6s; }
.letter:nth-child(31) { animation-delay: 0.62s; }
.letter:nth-child(32) { animation-delay: 0.64s; }
.letter:nth-child(33) { animation-delay: 0.66s; }
.letter:nth-child(34) { animation-delay: 0.68s; }
.letter:nth-child(35) { animation-delay: 0.7s; }
.letter:nth-child(36) { animation-delay: 0.7s; }


h1 {
  font-size:68px!important;
}
<h1 class="heading">
    <span class="letter">B</span><span class="letter">r</span><span class="letter">i</span><span class="letter">g</span><span class="letter">h</span><span class="letter">t</span> 
    <span class="letter">i</span><span class="letter">d</span><span class="letter">e</span><span class="letter">a</span> 
    <span class="letter">i</span><span class="letter">s</span> 
    <span class="letter">a</span><span class="letter">h</span><span class="letter">e</span><span class="letter">a</span><span class="letter">d</span> 
    <span class="letter">f</span><span class="letter">o</span><span class="letter">r</span> 
    <span class="letter">G</span><span class="letter">e</span><span class="letter">n</span><span class="letter">e</span><span class="letter">r</span><span class="letter">a</span><span class="letter">t</span><span class="letter">i</span><span class="letter">o</span><span class="letter">n</span>
</h1>

发布者：admin，转转请注明出处：http://www.yc00.com/questions/1744805169a4594731.html

adminadmin
0

相关推荐

  • Text wrap on CSS Animation - Stack Overflowquestions

    Text wrap on CSS Animation - Stack Overflow

    I have a strange glitch on my CSS animation that breaks up the words.I like the animation effect but t

    adminadmin
    2天前
    50

发表回复

评论列表（0条）

  • 暂无评论

联系我们

400-800-8888

在线咨询： QQ交谈

邮件：admin@example.com

工作时间：周一至周五，9:30-18:30，节假日休息

关注微信