Creating Exploding Text With CSS

In this tutorial you can learn how to create a nice exploding text transition for your website CV, or for use on a credit roll page. The effect is made with pure HTML and CSS, and no JavaScript is required.

6959 views

By. Jacob

Edited: 2019-10-14 13:10

Creating an exploding text transition animation with CSS keyframes is not entirely straight forward. The problem is that the animation will be limited by the available width of its container (parent), which causes the text to wrap onto the next line. However, we can easily solve this with a bit of fiddling with overflow and the width property.

Exploding text can be used as a nice effect on a portfolio site, or in a credits roll type of page.

The following example has a parent container, in this case we simply make use of body, but you can also do this with a div, and just about any other block-element.

Live example: Exploding text with CSS

The full CSS you will need is as follows:

body {overflow:hidden;}
.explode {
  width:200vw;
  animation:letter_explode 1s 5s forwards;
}
@keyframes letter_explode {
    0% {letter-spacing:0.1em;opacity:1;}
    100% {letter-spacing:1em;opacity:0;}
}

Simply use the .explode class on the elements containing the text you want to apply the effect on. You might also need to adjust the width depending on how much text you have. This is best suited for small text bits, such as names or titles.

Creating exploding text with CSS

First, we will need the CSS code. This should either be included in a internally with a style element, or in a external StyleSheet.

body {overflow:hidden;}
.explode {
  width:200vw;
  animation:letter_explode 1s 5s forwards;
}

The animation short-hand defines the following:

The name of the animation (letter_explode).
The duration of the animation.
A delay before the animation is started.
The animation-fill-mode

Other possible values for the animation-fill-mode are:

forwards = stops animation at last frame.
bakwards = stops animation at first frame.
both = Tries to apply both first and last frame simultaneously.

The name of the animation refers to the @keyframes animation part, which brings us to the following:

@keyframes letter_explode {
    0% {letter-spacing:0.1em;opacity:1;}
    100% {letter-spacing:1em;opacity:0;}
}

Keyframes can be used to control what happens at different stages of the animation, the above only has two keyframes, one at 0% and a final at 100%.

Finally, we have the HTML of the page:

<!doctype html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Exploding text CSS animation</title>
 <link rel="stylesheet" href="stylesheet.css">
</head>
<body>
<p>How to create exploding text with CSS keyframes.</p>
<p class="explode">This text will explode after 5 seconds.</p>
</body>

Tell us what you think:

Agnius Vasiliauskas

Thanks, very cool effect. I've modified it to be continuous and more like explosion, because now it looks more like a spring movement. For it to be more explosion-like,- you need to add text translation to the left operation too, like:
<style type="text/css">
.explode {
text-decoration:none;
position: relative;
animation:letter_explode 10s 0s forwards infinite linear;
}

@keyframes letter_explode {
0% {letter-spacing:0.1em;opacity:1;left:100px}
50% {letter-spacing:0.5em;opacity:0.4;left:0px}
100% {letter-spacing:0.1em;opacity:1;left:100px}
}
</style>