Inspired by celebratedesign.org’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.
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.
view source
