CSS Animated Jumping Text Effects

Learn how to create CSS Animated Jumping text effects.
Author: Erin E. Sullivan
Made with: HTML / CSS
Read More: CSS Animated Text Effects With Multiple Colors

HTML

<div id="wrapper">
    <div id="container">
        <h1>Lorem ipsum dolor sit amet.</h1>
        <p>Hover over text to pause.</p>
    </div>
</div>

CSS

@import url(https://fonts.googleapis.com/css?family=Raleway:400,700,900,400italic,700italic,900italic);

*, :before, :after {
    box-sizing: border-box;
}
body {
    background-color: #fdf9fd;
    color: #011a32;
    font: 16px/1.25 'Raleway', sans-serif;
    text-align: center;
}
#wrapper {
    margin-left: auto;
    margin-right: auto;
    max-width: 80em;
}
#container {
    display: flex;
    flex-direction: column;
    float: left;
    justify-content: center;
    min-height: 100vh;
    padding: 1em;
    width: 100%;
}
h1 {
    animation: text-shadow 1.5s ease-in-out infinite;
    font-size: 5em;
    font-weight: 900;
    line-height: 1;
}
h1:hover {
    animation-play-state: paused;
}
a {
    color: #024794;
}
a:hover {
    text-decoration: none;
}
@keyframes text-shadow {
    0% {
        transform: translateY(0);
        text-shadow:
            0 0 0 #0c2ffb,
            0 0 0 #2cfcfd,
            0 0 0 #fb203b,
            0 0 0 #fefc4b;
    }
    20% {
        transform: translateY(-1em);
        text-shadow:
            0 0.125em 0 #0c2ffb,
            0 0.25em 0 #2cfcfd,
            0 -0.125em 0 #fb203b,
            0 -0.25em 0 #fefc4b;
    }
    40% {
        transform: translateY(0.5em);
        text-shadow:
            0 -0.0625em 0 #0c2ffb,
            0 -0.125em 0 #2cfcfd,
            0 0.0625em 0 #fb203b,
            0 0.125em 0 #fefc4b;
    }
    60% {
        transform: translateY(-0.25em);
        text-shadow:
            0 0.03125em 0 #0c2ffb,
            0 0.0625em 0 #2cfcfd,
            0 -0.03125em 0 #fb203b,
            0 -0.0625em 0 #fefc4b;
    }
    80% {
        transform: translateY(0);
        text-shadow:
            0 0 0 #0c2ffb,
            0 0 0 #2cfcfd,
            0 0 0 #fb203b,
            0 0 0 #fefc4b;
    }
}
@media (prefers-reduced-motion: reduce) {
    * {
        animation: none !important;
        transition: none !important;
    }
}

2 Comments

  1. You could certainly see your skills within the paintings you write. The sector hopes for more passionate writers such as you who are not afraid to mention how they believe. At all times follow your heart. “There are only two industries that refer to their customers as users.” by Edward Tufte.

  2. Currently it appears like Movable Type is the top blogging platform available right now. (from what I’ve read) Is that what you’re using on your blog?

Leave a Reply