Unleash CSS3 to create impressive animated text effects

Give your typography the attention it deserves with these must-see animated effects created with CSS3


Give your typography the attention it deserves with these must-see animated effects created with CSS3



One of the biggest evolutions with CSS3 has been the ability to write behaviours for transitions and animations. These animated effects are a must-know for any designer or front-end developer as they unlock all kinds of interactive possibilities and visual feedback options.

In this tutorial the focus is on text with three different effects that offer some great possibilities. The first actually will not use standard text on the page, but will instead create the text inside an SVG element. The reason for this is that SVG enables strokes on text which is not possible to do with regular HTML text, and sometimes you may just need strokes with text. Using the SVG right in your HTML will keep your text accessible and will stop you having to rely on GIFs.

Once the stroke is in place, it will be given five different colours and set to march around the text with animation. The next text effect shows how to make a text rotator so that different words can be cycled through on the screen. The final effect will use text clip to clip the image to the text so that the image only shows inside the text. This will be turned into a call-to-action button with a sliding image effect.

1. Set up the document

Open the project folder in Brackets or a similar code editor and then open start.html. Create style tags in the head section and add the CSS shown. This will import the right typeface that will be used from Google and sets up the basic HTML settings for the pages.

@import url(,700);
html, body {
height: 100%;
font-weight: 800;
body {
background: #35483e;
background-image: url(img/bg.jpg);
background-size: cover;
font-family: Arial;

2. Write an SVG graphic

As SVG graphics are written with tags they can be easily authored without any graphics application. Move to the body tag and add the start of this SVG graphic, which creates text to display in the browser. Later this will get styling from the CSS that will animate this.

<svg viewBox="0 0 960 300">
<symbol id="s-text">
<text text-anchor="middle" x="50%" y="80%">Kinetic Design</text>

3. Create graphic lines

The next code that is added finishes off the SVG, more importantly though it creates five graphics nodes that will be styled using CSS to create five different coloured strokes. These target the text that was created in Step 2.

<g class="g-ants">
<use xlink:href="#s-text" class="text-copy"></use>
<use xlink:href="#s-text" class="text-copy"></use>
<use xlink:href="#s-text" class="text-copy"></use>
<use xlink:href="#s-text" class="text-copy"></use>
<use xlink:href="#s-text" class="text-copy"></use>

4. Add the CSS for the SVG

Move back to the CSS section of the page and add the rule for the SVG. This will display the object as a block element so that it can be centred on the page with the margin set to auto. The font for this element is set to Oswald and a large text size.

5. Style specific text

Now the CSS is targeting the specifics of the text and the fill is turned off while a white stroke is added to the text. The stroke isn’t applied all the way around the text by using the dash array. The stroke is widened and told to take five seconds to apply the animation.

6. Start the animation

By adding keyframes the stroke will immediately start animating around the edge of the text. Now each graphic element is given colour and a slight delay in its movement to create the basis for the rotating stroke around the outside. At present there are orange and dark red strokes.

@keyframes stroke-offset {
100% { stroke-dashoffset: -35%;}
.text-copy:nth-child(1) {
stroke: #5c0404;
animation-delay: -1s;
.text-copy:nth-child(2) {
stroke: #d6801c;
animation-delay: -2s;

7. Finish the stroke

As in the previous step, the CSS here is targeting the different children of the graphics object and they are given different colours and offset in their own animation. This now gives the effect of five different colours marching around the edge of the text.

.text-copy:nth-child(4) {
stroke: #ffff9e;
animation-delay: -4s;
.text-copy:nth-child(5) {
stroke: #55981b;
animation-delay: -5s;
@keyframes stroke-offset {
100% { stroke-dashoffset: -35%;}

8. Second effect

That completes the first effect that is being added to text, so now move down to the body tag and add our code from FileSilo to the SVG added earlier. This readies the setup of a text rotator that will move through the different list elements with animation, great for showing off a range of skills.

9. Style up the text

With the next content in place, move back to the CSS style tags and our code on FileSilo places the text in the centre of the page under the animated heading created earlier. At the moment this still looks like a list, but that will all change as more CSS is added to complete the effect.

10. Static section

The text is made to float left, where one half of the text is static, ie not moving, hence the name of the class that is controlling it here. Once floated to the left, the overflow is hidden. The height is set up so that only one line of the moving section can be seen.

.static {
float: left;
overflow: hidden;
height: 40px;

11. Paragraph style

The paragraph tag is targeted and given a light yellow colour that has also been used in one of the strokes around the edge of the previous text, just to keep consistency with the colours. Again this text is floated to the left so that the list can sit alongside it.

p {
display: inline;
float: left;
margin: 0;

12. Set the unordered list

Now with this rule targeting the unordered list, you will notice that the text for the first element is sitting alongside the static text. The other list elements are below this but because the overflow is cut, it isn’t being displayed until the animation is added.

ul {
margin-top: 0;
padding-left: 130px;
text-align: left;
list-style: none;
animation: 6s linear 0s normal none infinite change;

13. Size up the height

Styling up the list elements applies the right colour for these elements and more importantly sets the line height so that the text moves to the right section and can only see that section at any one given time. If the line height was smaller it might be possible to see parts of the other text on the screen.

14. Make it move

The final setup for the CSS part is to make it move by defining the keyframes called ‘change’. Step 12 calls for these keyframes and adding these will immediately start the text rotator sliding up and down to show the text. Because the animation was set to infinite, this will just keep looping.

@keyframes change {
0% { margin-top: 0; }
15% { margin-top: 0; }
25% { margin-top: -40px; }
40% { margin-top: -40px; }
50% { margin-top: -80px; }
65% { margin-top: -80px; }
75% { margin-top: -40px; }
85% { margin-top: -40px; }
100% { margin-top: 0; } }

15. Call to action

That completes the second animation that we are exploring. Now it’s time to add the final animation, which will be for an animated rollover button, using a newer CSS command: clip text. In the body add the HTML from FileSilo below the other content that is on the page.

16. Centre the box

The first part of this is simply to centre the box and for us to clear the floated elements in the content above. This box is going to be quite small on the screen so it is being made to be 400 pixels wide. The auto margin centres the div box on the screen.

width: 400px;
margin: 0.5em auto;}

17. Start the clipping

The next rule will set up the clipping of the text. Firstly the right typeface is applied to this and the type is given quite a prominent size of 3ems. The text is centred with the block and some margin and padding sets this up nicely on the screen.

margin-top: 4em;
padding: 0.3em;
font-size: 3em;
font-family: 'Oswald';
text-align: center;
position: relative;
display: block;

18. Apply the image

Now for the real nuts and bolts of the process. Here the clip-text rule is continued and the background image is set to display, however instead of it being in the background like normal, the text is set to clip it. This means that the background only appears inside the text.

background-image: url(img/text-bg.jpg);
background-position: bottom;
background-size: cover;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
transition: 2s ease all;

19. Rollover effect

Adding the code here will set the rollover for the text and the background image. The image will be set to be positioned at the top in the background. Previously it was set to the bottom so the text will have the image slide through the text as the user rolls over it with the mouse.

.clip-text:hover, .clip-text:hover::before {
} .clip-text:before, .clip-text:after {
position: absolute;
content: '';