Official website for Web Designer - defining the internet through beautiful design
FOLLOW US ON:
Author: Steve Jenkins
15th April 2014

Create simple CSS3 @keyframe animation

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

Create simple CSS3 @keyframe animation

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 }
011 

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!

Tags:
  • Tell a Friend
  • Follow our Twitter to find out about all the latest web development, news, reviews, previews, interviews, features and a whole more.
    • aferlazzo@gmail.com

      Why couldn’t you include a demo link of the working code? Short of that, at least code that could be copied and pasted, rather than including line numbers for some reason. Lacking even that bit of thoughtfulness to your readers, at the very least it would have been nice had you included all the css code in the article.

    • paulfeakins

      They included the code on the CD that ships with the magazine. Unfortunately Linux Mint isn’t recognising my CD drive, which leads me here.

    • John Vale

      The code on the cd included with the magazine doesn’t work properly either. All it gives me is a static image of the text in the magazine photos. I thought these tutorials were actually supposed to teach us something by providing working examples. A wasted afternoon attempting this, and I’m not filled with optimism about any other “tutorials” presented in this magazine. Perhaps I’ll give the subscription a miss…

    • John Vale

      Seems I was premature in my last post. The code actually runs as it should in Firefox, and very nice it is too. However, it still fails to work in Chrome or IE for some reason. Someone on CSS Tricks suggested that the issue may be related to missing vendor prefixes. Suddenly a subscription to Web Designer seems attractive again…:-D