Attempting to animate line height


by Jeremy Caudle
notes

Today I cooked a pack of shio ramen for a late evening snack. While I was boiling the ramen, I wondered if I could animate a paragraph's line-height and animate the line-thickness on a wavy underline to simulate the breaking up of instant ramen noodles as they are boiled in water. It looks like line-height doesn't really animate that smoothly.

When I was a kid I only knew about the various kinds of ramen that I saw at grocery stores in the US. Maruchan was the best brand and I really liked their chicken flavor. Despite having spent the first few years of my life in Japan, I did not know how much variety and grace would hit my tastebuds when I finally visited and eventually moved back to Japan.

View the code:

HTML and JS 
<div class="codedoodle-block">
        <p id="ramen">When I was a kid I only knew about the various kinds of ramen that I saw at grocery stores in the US. Maruchan was the best brand and I really liked their <em>chicken</em> flavor. Despite having spent the first few years of my life in Japan, I did not know how much variety and grace would hit my tastebuds when I finally visited and eventually moved back to Japan.</p>
    </div>
CSS 
/* Variables */

        :root {
            --bodybg: #cab676;
            --main: #444444;
            --secondary: #33228f;
        }

        /* Code Block styles */

        div.codedoodle-block {
            background-color: var(--bodybg, #cab676);
            margin: 3rem auto;
            padding: 1rem;
            width:80%;
            max-width: 800px;
            height: auto;
            border: solid 5px transparent;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            border-radius: 1rem;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }

        .screen-reader-text {
            color: transparent;
            position: absolute;
            top: 0;
            left: -10000px;
        }

        .codedoodle-block p {
            padding: 2rem;
            margin: 0 auto;
            max-width: 40em;
            line-height: 20px;
            letter-spacing: 1px;
            color: transparent;
            text-decoration-color: #fff09b;
            text-decoration-style: wavy;
            text-decoration-thickness: 3px;
            text-decoration-line: underline;
            animation: noodles 12s ease-in-out 0s 1 forwards,  text 3s ease-in-out 12s 1 forwards;
            font-weight: bold;
        }

        @keyframes noodles {
            from {line-height: 20px; }
            to {line-height: 2; text-decoration-thickness: 4px; letter-spacing: 2px;}
        }

        @keyframes text {
            from {color: transparent;}
            to {color: white; }
        }

Tags