Archive for September, 2012

Deke’s Techniques: Creating Spirograph-style art in Illustrator

Published by | Tuesday, September 18th, 2012

In this week’s free Deke’s Techniques episode, Deke McClelland uses Adobe Illustrator to recreate the classic Spirograph toy effect. Rather than watching this work take shape with a pen stuck into a plastic gear, Deke shows you how to grow your Spirograph shape with the simple application of dynamic transformations viewable in the Illustrator Appearance panel. In fact, all you have to do for this effect is draw one single circle in Illustrator, then duplicate and transform your circle’s stroke to create the hypotrochoidic shape. (Deke’s Techniques, bringing you great graphic techniques and free vocabulary expander words!)

As you can see in the video above, Deke begins this technique by selecting the central circle in a simple circular logo design:

Simple circular logo design

By simply selecting that circle, using the Transform command to make the circle an ellipse, and duplicating the ellipse over and over with variations, a familiar Spirograph pattern begins to quickly take shape. You can see from my Appearance panel screen capture below that this effect is the result of multiple transformations.

Adobe Illustrator Appearance panel showing many transformations of an ellipse to create a spirograph

In the end, the skeletal logo we started with becomes the intricate, refined logo we see below, complete with outer circle, thin edge around the inner circle, and intertwining ellipses in the center created by transforming the original outer circle.

Final project with spirograph-style art created inside the inner circle of the original logo

Even if you’re new to Illustrator and not particularly gifted at drawing, you can achieve this technique with some concentration and Deke’s advice. (And if you are new to Illustrator, this is also a good lesson on how to use the Transform effect.)

For members of, Deke also has an exclusive movie in our library this week, called Tracing scalloped gear teeth around a circle, in which he dynamically adds gear-like teeth to the outer circle of our example logo using a similar type of dynamic Illustrator approach.

Deke's spirograph-style logo with gear teeth added on the outer rim using Adobe Illustrator

Deke will be back with another free technique next week.


Interested in more?
• The entire Deke’s Techniques weekly series on
• All Illustrator courses on
• All courses by Deke McClelland on

Suggested courses to watch next:
• Illustrator CS6 One-on-One: Fundamentals
• Illustrator CS5 One-on-One: Fundamentals
• Illustrator Insider Training: Rethinking the Essentials helps HuffPo blogger land tech job

Published by | Tuesday, September 18th, 2012

To break into the professional world of technology, says Huffington Post tech blogger Pietro Rea, you should narrow your search, create a portfolio—and build up your skills via and other resources.

In the recent post “From Liberal Arts to Technology: Making the Switch,” Rea says he personally used iOS training to “make the switch from ‘business guy’ to ‘tech guy.’ ”

Landing a job in the tech industry, he says, means knowing everything from Java and PHP to understanding algorithms and software architecture. “Omitting this foundation,” he argues, “would be like trying to become a surgeon without knowing basic biochemistry.”

Recruiter recommends for job seekers

Published by | Monday, September 17th, 2012

Staffing expert and executive recruiter Leslie Ayres recommends as an efficient and affordable way to find a job or get a promotion in the recent article “DIY Online Training Can Boost Your Career.”

Published on, a site with advice and inspiration for active people ages 45 to 65, the story points out that “the future of learning is online training” and that provides knowledge, confidence, and an edge over the competition.

“I sure don’t have the time or interest to register at college, then drive every Tuesday night to sit in a room just to learn how to use my iPad,” writes Ayres. “And I don’t want to weed through lists of short amateur YouTube videos, either.”

She recommends courses like Cloud Computing First Look, Designing a Brochure, and WordPress Essential Training to help professionals “hit the ground running when you do get your next job, or bring a new level of awesome to the job you have now.”

Sharing a Google Doc with a non-Google user

Published by | Saturday, September 15th, 2012

You’ve just completed a Google spreadsheet with charts, formulas, and data galore. Now you’re ready to share your spreadsheet with your colleagues and you realize that you don’t know whether or not they have a Google account. The good news is that there are many ways to share a Google Doc with a non-Google account holder.

The easiest solution is to simply ask your colleague(s) if they have a Google account. But in this case, we’ll assume that you either don’t have time to ask, you need to share a document with several colleagues under deadline, or it is a situation in which you simply can’t get that information ahead of time.


In this post, we’ll discuss three of the most common scenarios for sharing a Google Doc with a non-Google account holder, but first we should probably get clear on some vocabulary.

A Google account is not a Gmail account. A Google account is a unified sign-in system that gives one access to Google products like Docs, Groups, AdWords, and so on. A Google account can be associated with any email address—not just Gmail addresses. It’s very likely that the person you are trying to share a Doc with already has a Google account that they have created at one time or another.

A Doc is a Google document, spreadsheet, presentation, drawing, or form. Docs can only be edited within the Google Docs application. A Google account is a user name and password that allows a person to sign into Google Drive. This may be an @gmail account, a Google Apps account, or any email address associated with a Google account. You can associate any email address in the world with a Google Apps account.


Three scenarios for sharing a Doc with a non-Google account holder

Scenario one: You’ve created a document, spreadsheet, or presentation and you need to share the completed version with a non-Google user.

In this case the best thing to do is send the document as an email attachment. With the Doc open, click the File menu and choose Email as attachment. A dialog box will appear where you can adjust the format for the file, enter the email address of the recipient(s), and send a message along with the Doc.


You can send your Docs in the MS Office format, as text files, as HTML files, or even as PDFs.

This is the best option if you are sending a completed file, like a report. However, if your recipient makes edits to the file in Microsoft Excel or Word and sends it back to you, you can always convert the file from MS Office format back into a Google Doc to edit.

Scenario two: You need to share a doc with a group of people who do not have Google accounts and you would like them to make edits to the doc.

If this is the case, the best thing to do is to change the visibility options of the Doc to Anyone with a link. You can change the visibility options by opening your Doc, then clicking the Share button at the top right and selecting Change under the Who has access portion of the Sharing settings dialog box. This will bring up the Doc’s visibility options. Select the second option, Anyone with the link, and then select Can edit from the dropdown menu by Access. Finally, click Save to keep your changes.


Note: If you are a Google Apps users and you do not see the option Anyone with the link it may be that your Google Apps administrator has disabled this type of sharing. If this is the case, you should move on to scenario number three, below.

Once you click the Save button you will be back at the main sharing screen. Copy the link in the Link to share field. This is the link you should share with people who need to make edits to the Doc. Once you share the Link to share link, your editors will be able to access the Doc in edit mode without being asked to sign in. Do not share the URL you see in your browser’s URL menu because that is a private link only for you.

If you are in the Doc at the same time as another person, the people that do not have Google App accounts will show up as Anonymous User You’ll also see these non-Google people show up as anonymous users when you look at the revision history.


The anonymous users with which you share your Google Doc link do not automatically become what Google calls collaborators, so be aware that you will not be able to use the Email collaborators function (as mentioned in scenario one) if you share the Doc using the supplied link.

It should also be noted that it is a best practice to change the visibility settings of the Doc back to Private when people are done editing and the Doc is complete. That way, no one can use the link you shared to come back into the Doc later and make more changes.

I would not consider using the Link to share functionality a best practice for sharing confidential Docs because this system of sharing creates a link that anyone can access. If you need to share a confidential Doc, see scenario three, below.

Scenario three:You need a non-Google user to edit your Doc and you don’t have the option to change the Doc’s visibility settings to Anyone with the link. Or you need to share a confidential Doc with someone who does not have a Google account.

If you want to share a private Google Doc and you want to use the Google Doc editor to edit the file, and the Google Doc list to manage the file, then you should ask your contributor to create a Google account.

As mentioned aboved, a Google account is not a Gmail account, but rather a unified sign-in system that gives one access to Google products like Docs, Groups, AdWords, and so on. A Google account can be associated with any email address—not just Gmail addresses—and it’s likely that the person you are trying to share a Doc with already has a Google account that they have created at one time or another.

When you share a private Doc with someone they’ll be sent a link to the Doc via email. When they click on the Doc link they’ll be taken to a sign-in page where they can enter their Google account user name and password. If they don’t have a user name and password, they can click the Sign Up link to create a new Google account. With a Google account created, the person can now access the Google Doc that you have shared with them. They can receive email notifications about the file, and based on your permission settings, they can now edit the file online. When they have the Doc open, you will see their user name appear in the upper right-hand corner of your Doc, rather than the Anonymous User moniker that appears for non-Google editors.


These are the three best ways to share a Google Doc with a non-Google user. I would also keep in mind that as more and more people are using Google products in one way or another, it is very likely that many of the people you need to share a Doc with will already have a Google account.

To learn more about Google Docs and Google Drive, check out Google Drive Essential Training on to host a webinar on personalized education

Published by | Friday, September 14th, 2012

This week, presents a free webinar for members and educators as well as corporate and government trainers. In Personalized Education: A Roadmap to On-Your-Own Learning, see how teaches learners to evaluate where they are now, where they want to go, and the tools they need to get there.

Rising tuition costs, a volatile job market, ever-changing technology…

Today’s learners face real challenges. They want a student-centered education that gives them skills, helps them solve problems, and lets them benefit personally.

They want

  • • customized, self-directed learning that reflects their interests
  • • dynamic, adaptable instruction for just-in-time answers
  • • anytime, anywhere access via desktop, laptop, or mobile device
  • • education that’s relevant, affordable, and fun

Webinar details:

When: Friday, September 21, 2012



Choose your time:

10 to 11 a.m. ET

7 to 8 a.m. PT

Register for time-slot one


2 to 3 p.m. ET

11 a.m. to noon PT

Register for time-slot two



InDesign Secrets: Creating a custom bullet character

Published by | Thursday, September 13th, 2012

In this week’s InDesign Secrets episode, David Blatner shows you how to use the free IndyFont script to create one custom font character that you can use to create a custom bullet. There is also a commercial version of the IndyFont script that allows you to make complete fonts, but for our purposes today, we only need the free version that lets you make a single bullet character.

If you want to get right to watching the technique, here’s David explaining the process, video style:

If you prefer a step-by-step visual walk-through of this technique, here’s how it’s done:

Part one: Downloading and installing the IndyFont script

Installing a script isn’t as daunting as it might sound. First, and perhaps most obvious, you’ll need to download the script, which you can do by clicking here to automatically download the .zip file, or by visiting

After the file is unzipped, installing the script simply requires dragging it to the correct folder. To discover where that folder is, open the Scripts panel in InDesign (Window > Utilities > Scripts), then right-click on the User folder and choose Reveal in Finder (or Reveal in Explorer if you’re working in Windows).

The Adobe InDesign Scripts Panel with the User Folder selected

Next, open up the Scripts Panel folder and drag the script file, indyfont_demo.jsxbin, from your Downloads folder, or wherever you downloaded and unzipped it, and put it into your Scripts panel.

Moving the IndyFont script folder from the Desktop to the Scripts Panel

There’s no need to restart InDesign or perform any other acrobatics, just return to InDesign to find the script visible in the panel.

Part two: Pasting in your vector art

Next, you’ll need a piece of vector art to turn into your new character. You’ll want it to be fairly substantive and black. I thought it would be fun to use my personal light bulb doodle, a little graphic that I draw in my notebook margin when I want to mark an idea. Here’s the vector-based version of the light bulb:

Vector-art graphic of a light bulb

Note: IndyFont requires that the vector art be defined in black. (Possibly, I learned this the hard way. )

To turn this graphic into a bullet character, double-click on the IndyFont script in the Scripts panel. In the Create font template  dialog box, enter the name of your new font. (Don’t worry, it’s still a font, even if there’s only one character.) The /bullet in the Character field indicates that your graphic is going to become the default bullet character.

Create font template dialog box with the new font name highlighted

IndyFont will automatically create a new InDesign file. (One of the beauties of IndyFont is that you get to work primarily in InDesign; the weird thing is that it’s not particularly intuitive.) On the second page of that new file, there’s a place to paste your vector art. The red line represents the text baseline, and the green vertical line can be moved left and right to accommodate your artwork. It’s important that your artwork is placed between the two vertical green lines.

Vector-art graphic opened in the InDesign IndyFont script


Run the script again and you’ll be asked where you want to save your font. In this case, go with the default InDesign Fonts and click OK.

IndyFont save alert with OK option selected

Part three: Applying your new single-character font

When you return to InDesign, your new character will be available in any place a standard character would be. So in David’s example, he sets his new character up as a custom bullet. So let’s say I started with this boring list of our most recent InDesign weekly ideas:

The standard bold bullets in Adobe InDesign

To customize the bullets in your list, first Alt-click on the bulleted list icon in the options bar.

The Adobe InDesign options bar with the bulleted list icon highlighted

Then, in the Bullets and Numbering section of the Paragraph Style Options dialog box, click the Add button.

Bullets and Numbering section of the Paragraph Style Options dialog box

Then in the Add Bullets dialog box, navigate to your new character. It will be in the Font Family called IF (for IndyFont) and it will be named whatever name you gave it (I named my light bulb bulbosaur). Since you only created one IndyFont character, it will be the only character you see.

Add Bullets dialog box

Click OK twice to back out of the two dialog boxes, and voilà, your boring bullet has become your interesting new character. If you’ve applied a paragraph style (in this case, I’ve turned my light bulbs a nice lynda Yellow), you can update all the bullets at once:

The final result: custom lightbulb bullets in Adobe InDesign

To see these steps in action, make sure to check out the video Making a font with InDesign using the IndyFont script on, or embedded at the top of this post. For members of, David’s partner in InDesign secrecy, Anne-Marie Concepción also has a member-exclusive movie in the library this week called Finding where that color is used that discusses how to find where a specific color is being used within your InDesign document.

David and Anne-Marie will be back in two weeks with more InDesign Secrets.



Interested in more?
• The entire InDesign Secrets biweekly series
• Courses by David Blatner and Anne-Marie Concepción on
• All InDesign courses

Suggested courses to watch next:
InDesign CS6 New Features
 InDesign CS6 Essential Training
InDesign Typography

Deke’s Techniques: Creating a hand-carved wood effect in Photoshop

Published by | Tuesday, September 11th, 2012

In this week’s free Deke’s Techniques, Deke uses Adobe Photoshop to create the effect of hand-carved letters in a wooden sign. I don’t mean embossing typed-out text into a wood background, but rather, making hand-drawn letters look like they were manually carved into an old wooden sign many years ago and weathered over time. To create this effect, Deke uses the fairly uncommon Dissolve blend mode. While Dissolve is seldom used, for this particular effect it provides the gritty, worn edges we’re looking for. If you want to watch the video right now, here’s the episode:

If you prefer a step-by-step visual walk-through of this technique, here’s how it’s done:

Starting with an old wooden sign masked against an appropriately desolate background, Deke begins his technique by hand-drawing some white letters on to their own layer using a Wacom tablet.

Adobe Photoshop Layers panel with background, sign, and "go away" lettering as layers.

The next step is to make the letters soft and more or less invisible. Deke starts by setting the fill Opacity to 0% in the Layers panel so that the writing disappears. Next, he brings back the edges of the now invisible letters by applying a white drop shadow. To do this, click the fx icon at the bottom of the Layers panel to bring up the Layer Style dialog box. Within the dialog box, set the color of your drop shadow to white, the Opacity to 100%, and the blend mode to Normal. In order to ensure the original characters don’t cut holes in the drop shadow (which will become the basis for the letters from this point on), Deke unchecks the Layer Knocks Out Drop Shadow check box in order to see the shadow all by itself (minus the actual letters that informed it).

Layer Style dialog box with Drop Shadow option highlighted

In order to get the dithered-edge effect that will simulate carved, weathered wood, Deke applies the seldom-used (and, in truth, seldom-useful) Dissolve blend mode to the drop shadow. Although Dissolve is problematic in most situations, for this technique it works well. Setting a Distance value of 0 and Size value of 10 creates noisy, ratty edges.

Layer Style dialog box with Dissolve blend mode selected

The next step is to turn the letters into a layer mask, so that you can ultimately make a selection that includes both the shape of the letters and the effects you’ve applied. Deke starts by creating an adjustment layer beneath the Go Away character layer that’s filled with black. To do this, click the layer with your sign image to make it active, and then click the black-and-white circle icon to bring up the  fill/adjustment layer pop-up menu at the bottom of the Layers panel. Choose Solid Color from the pop-up menu, and set the color to black. Next, go to the Channels panel and grab the white letters off the black background by Command-clicking (or Ctrl-clicking on a PC) the RGB channel option to automatically select the white characters, and deselect the black background.

Channels panel with options to create noise in the "Go Away" layer

Once Deke has the selection he wants with all its great noise-infused edges, he turns off the original Go Away character layer and black background layer and duplicates the sign image layer to serve as a base for where he’ll create the carved letters. Since, in its original incarnation, the sign layer once served to mask the sign against the background, you’ll see the duplicate you made of the sign layer also has a layer mask that is no longer needed (or wanted). Right-clicking on the layer mask and choosing Delete Layer Mask from the contextual menu gets rid of your layer mask and puts you in a position to add a Go Away–shaped layer mask to the new sign layer. Clicking the Add Layer Mask icon at the bottom of the Layers panel will create that mask based on the currently loaded selection.

Layer panel with the noise-infused "Go Away" layer mask added

Because the letters are filled with the sign and they are set against the very same sign, they’re invisible ghostly placeholders until Deke applies some layer effects. First, the carving gets burned into the sign by applying an Inner Shadow effect. After clicking the fx icon at the bottom of the Layers panel and choosing Inner Shadow, he sets the color to a dark brown (Hue: 30, Saturation: 100, Brightness: 25), sets the blend mode to Linear Burn, sets the Opacity to 50%, the Distance to 15 pixels, and the Size to 25 pixels.

Layer Style dialog box with the Inner Shadow option highlighted

To add some differentiation around the outline of the letters, Deke next adds an Outer Glow layer style. Since the Layer Style dialog box is already open, he can just click Outer Glow from the left-hand list. After setting the color to the same dark brown used for the inner shadow (Hue: 30, Saturation: 100, Brightness: 25), he changes the blend mode to Linear Burn again, sets the Opacity at 55%, and the sets the Size to 2 pixels.

Layer Style dialog box with the Outer Glow layer style option highlighted

Finally, Deke applies color to the inside of the carving by clicking Color Overlay from the left-hand list within the still-open Layer Style dialog box. Using a color of Hue: 30, Saturation: 75, Brightness: 35; a blend mode of Hard Light; and an Opacity of 40%, he fills the Go Away letter area with a rich dark brown. Clicking OK at this point applies all three layer effects.

Setting the Color Overlay opacity in the Layer Style dialog box

In order to give the carved area an appropriate sense of depth, Deke moves the wood grain inside the letters down by unlinking the image from its mask (click on the chain-link icon between the sign image and Go Away layer-mask thumbnails) and nudging the sign image down five pixels. You can do this by clicking on the thumbnail with the sign image to make it active; then, holding down the Command key (or Ctrl key on a PC), press the down arrow button five times.

Moving the wood grain inside the lettering with the Layers panel

Finally, to turn the stray pixels around the outlines of the letters into little bits of Photoshop-simulated wood grain, Deke applies a bit of motion blur. Clicking the Go Away layer-mask thumbnail to ensure he’s only applying the blur to the mask, Deke chooses Filter > Blur > Motion Blur, sets the Angle to -3 (to match the direction of the wood grain), and a sets a Distance of 5 pixels.

Photoshop Motion blur dialog box

To compensate for the softness created by the blur, Deke lastly applies a bit of sharpening by selecting Filter > Sharpen > Smart Sharpen, then setting the Amount to 100, the Radius to 1, and the Remove setting to Lens Blur.

Photoshop Smart Sharpen dialog box

And here is the final effect:

The final project

You can see this entire technique in detailed action, including on-the-fly tips and insights from Deke, in the video above, or by navigating to video number 160 on the Deke’s Techniques series page. Please let me know in the comments if you like this expanded combination of text instruction alongside video, and if you find it helpful.

And, of course, since we don’t want you to really go away, Deke will be back with another technique next week.


Interested in more?
• The entire Deke’s Techniques weekly series on
• Courses by Deke McClelland on
• All Photoshop courses on

Suggested courses to watch next:
• Photoshop CS6 One-on-One: Fundamentals
• Photoshop Masking & Compositing: Fundamentals
 Photoshop Blend Mode Magic


Exploring browser animation options: Part one, CSS3

Published by | Saturday, September 8th, 2012

There are lots of ways to get animations to play in modern browsers. With so many options, it can be tough to determine the best way to tackle a specific project. Should you use CSS3? Is it better to use jQuery? What about Canvas or Canvas based libraries like Easel.js? In this series of articles, I’ll compare and contrast some of the different technologies behind web animations, show how to code sample animations, and note advantages and disadvantages behind each. We’ll get started with CSS3 animations.

CSS3 Animations

First and by far the easiest way to move things in a browser is to animate DOM (Document Object Model) elements using CSS3. On some platforms the animations are GPU (Graphics Processing Unit) accelerated, which makes then faster, especially when animating 3D transitions on mobile devices. Because the animations are done with CSS, no JavaScript is required, although you can still use it to add interactivity to your animations.


CSS3 Animation Example

Note: I added a button and a bit of jQuery to the example above so you can start and stop the animation in the JSBin example above. I’m just discussing the essentials of the animation without those elements below. I’m using -webkit prefixes here for brevity, so this example is only going to work in WebKit browsers like Safari or Chrome.
. If you want to be compatible with more browsers, make sure you add the other prefixes. Check out CSS3 Please for more info.

Let’s take a look at how these are done. We’ll start off by creating an IMG tag and pointing that to a small photo. We’ll add the startspin class so we can target it with CSS later.

<img id="startspin" src="" />

Then, it’s time to add some CSS to animate this. CSS animations are done in two parts, first of which is creating a series of keyframes, much like what you would do with any timeline-based program like Adobe Edge or After Effects. Let’s create the keyframes:

@-webkit-keyframes spin {
    0% {
        -webkit-transform: rotate(-360deg) scale(1.5);
        opacity: 0;
    50% {
        -webkit-transform: rotate(30deg) scale(.8);

We can use a percentage with different values to indicate at what point in the time our elements (in this case the IMG) should transform (0% and 50%). Inside curly brackets, we then we can use transform attributes to modify our element. In the example above, I rotate the object and scale it. I’m also adjusting the opacity as a separate property/value pair. You can use different transformations like this.

Notice that you don’t need to include a keyframe for 100%. The object will animate from the transformation at 50% to whatever the image is supposed to look like when it has no transformations.

Once you have a series of keyframes, it’s time to assign these to a CSS class or an ID. So you can attach the animation to an element in the DOM (in our case, an image), plus control how the animation plays.

.startspin {
        -webkit-animation: spin 2000ms ease-in-out;

This adds the animation to the startspin class, which we attached to the image tag already, so the animation will execute when the image loads.

The animation property is a shorthand for six of CSS3′s animation properties: animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count, and animation-direction. You can pass a number of options to the property, and in my example, I’ve specified that this animation will be using our spin keyframes, that the animation will last 2000 milliseconds (you can use s instead if you want to specify seconds) and that it will be using an easing function called ease-in-out that will make it animate slowly at the beginning and at the end. If you’ve worked with animation in other software, these should be pretty easy to pick up. Otherwise, check the CSS3 animation documentation.

Another example

CSS3 Animation Example

In this example, I’m using JavaScript to control what happens when someone clicks on the image, which causes a second set of keyframes named pulse to take over the animation. You can use the keyword infinite to have an animation play repeatedly forever (which might get obnoxious quickly, so use with caution), or simply specify a number of times you want the animation to play.

Limited primitives

Unfortunately for CSS3, there are very few graphic primitives (native ways to draw shapes) in the language. You can create a box, or if you make a box have 50% borders a simple ellipse, but that’s pretty much it, so you wouldn’t want to build a game with CSS animations. However, you can bring in any type of graphic your browser will accept like SVG, JPG, and PNG files and they will animate fine with CSS.

Vendor prefixes

One of the huge disadvantages, and, frankly, the Achilles heel to working with CSS3 animations, is that in order to get CSS to work with as many browsers as possible, we should include vendor prefixes like -webkit (safari and chrome), -moz (Firefox), -o (Opera) and of course the property without the prefix. This is a huge problem because animations use a large number of property combinations that all need prefixes. If you take a look at just transforming an object by 30 degrees, here’s the code you’d need for that.

-webkit-transform: rotate(30deg);  /* Safari 3.1+, Chrome 
-moz-transform: rotate(30deg);  /* Firefox 3.5-15 
-ms-transform: rotate(30deg);  /* IE9+ 
-o-transform: rotate(30deg);  /* Opera 10.5-12.00 
transform: rotate(30deg);  /* Firefox 16+, Opera 12.50+

And that’s just one property. Not taking into account what you have to do to create your keyfames, which for a simple fade would look something like this:

@-webkit-keyframes fade {
    0%   { opacity: 0.0; }
    50%  { opacity: 0.3; }
    100% { opacity: 1.0; }
@-moz-keyframes fade {
    0%   { opacity: 0.0; }
    50%  { opacity: 0.3; }
    100% { opacity: 1.0; }
@-o-keyframes fade {
    0%   { opacity: 0.0; }
    50%  { opacity: 0.3; }
    100% { opacity: 1.0; }
@keyframes fade {
    0%   { opacity: 0.0; }
    50%  { opacity: 0.3; }
    100% { opacity: 1.0; }

To expect someone to do a complex animation using all of the prefixes is unreasonable, and that’s why most of the examples you’ll see online use -webkit prefixes, target a specific browser or are done by super hardcore coders. There are some JavaScript frameworks Like Lea Verou’s Prefix Free that can help with this, but I don’t foresee a lot of people using CSS3 animations as their primary animation method until years from now—if ever. There are just easier and better ways.

Progressive Degradation & Compatibility

Whenever you work with any CSS3 properties, you should check browser compatibility and make sure that whatever code you end up using isn’t essential to the functionality of your website. Users with older browsers shouldn’t still be able to use and view your site even though they might not get all of the animation sugar.

Here’s a compatibility table from Can I Use:

If you want to learn more about CSS animations, I’d suggest watching my course IOS Web Applications with HTML5 and CSS3.