Notice: Undefined index: order_next_posts in /nas/content/live/gadgetmag/wp-content/plugins/smart-scroll-posts/smart-scroll-posts.php on line 194

Notice: Undefined index: post_link_target in /nas/content/live/gadgetmag/wp-content/plugins/smart-scroll-posts/smart-scroll-posts.php on line 195

Notice: Undefined index: posts_featured_size in /nas/content/live/gadgetmag/wp-content/plugins/smart-scroll-posts/smart-scroll-posts.php on line 196

Create simple CSS3 @keyframe animation

Inspired by’s opening mission statement, we look at adding subtle animation effects to text and page elements

Page and heading styles

In this exercise we will show how a string of page text can be animated into place using CSS3. A portion of a given phrase will enlarge before being completed by a falling word – which itself will land on a blinking prompt line. So to start, set some basic page styles for <body> and <h1> elements. Here we’re using a grey gradient background and a custom Google font you’ll need to attach as normal.

001 body {
002 background: linear-gradient(grey, white) no-repeat;
003 font-family: ‘Lato’, sans-serif;
004 }
005 h1 {
006 color:#000;
007 font-size:110px;
008 float:left;
009 }

Set up the page

In the page <body> we basically have a container <div> for positioning our text. Inside, it has an <h1> string in two parts as these will be animated and styled using independent CSS classes. There is also an extra <div> that will be styled later and form the blinking line prompt.

001 <body>
002 <div class=”textBox”>
003 <h1 class=”statement”>Celebrating web design that</h1>
<h1 class=”word”>&nbsp;inspires&nbsp;</ h1><h1 class=”statement”>?</h1>
004 <div class=”prompt”></div>
005 </div>
006 </body>
001 .textBox {
002 margin:23% 12%;
003 width:2150px;
004 }

Grow the text

The first part of our <h1> statement will grow from zero pixels to the full 110px as desired. To do so, we attach the class ‘.statement’ and set various core animation properties. The duration will be two seconds, while the iteration count will last for just the one cycle. We then point to a @keyframes class called ‘growing’, where the from and to transitions are defined – which is basically applying new styles.

001 CSS:
002 .statement {
003 animation-duration: 2s;
004 animation-iteration-count: 1;
005 animation-name: growing;
006 }
007 @keyframes growing {
008 from {
009 font-size:0px;
010 opacity:0;
011 } to {
012 font-size:110px;
013 opacity:1;
014 }
015 }

Drop the text

The final phrase, ‘inspires’, will drop from the browser top (-70%) to our text line, margin-top zero, where it will reside. We will also swap the colour from the default black to green and adjust the opacity in order to make it smoother. This time we’ll set the duration slower, plus instruct the element to keep the styles from the final animation frame by setting animation-fill-mode to ‘forwards’.

001 .word {
002 animation-duration: 6s;
003 animation-iteration-count: 1;
004 animation-name: falling;
005 animation-fill-mode: forwards;
006 }
007 @keyframes falling {
008 from {
009 margin-top:-70%;
010 opacity:0;
011 }
012 to {
013 margin-top:0;
014 color:#0C9;
015 opacity:1;
016 }
017 }

Add the text prompt

Here we add a blinking cursor or prompt to go under the missing word of our statement. This is a green <div>, sized and positioned to sit perfectly below where the falling ‘word’ <h1> element will land. Here we set the animation-duration to a quicker 0.9s and make it loop. You can force the animation to endlessly repeat by setting animation-iteration to ‘infinite’ as follows.

001 .prompt {
002 background:#0C9;
003 width:460px;
004 height:40px;
005 float:left;
006 margin:2% 66%;
007 animation-duration: 0.9s;
008 animation-iteration-count: infinite;
009 animation-name: blinky;
010 }

Make the prompt blink

To finish off, we add a last @keyframes class named ‘blinky’ to correspond with the previous step. This one merely toggles the opacity between fully transparent and opaque, indefinitely as already stipulated. Save your page and preview to check the result – you should find all the animations working seamlessly, with everything literally falling into place!