Just for the fun of it, I decided to make a quick entry for the Bearskinrug “Draw Your Own Thrilling Space Adventure” contest. I decided to use all of the “how to draw” elements in this family adventure. Though, I did add the Zippy Pop. After all…nothing says adventure like Zippy Pop!

Note: To view the animation, you’ll need to be using one of the latest versions of Safari or Chrome.

What We’re Building

In this example, we’ll be enhancing a typical chemistry figure showing the structure of a Hydrogen atom. We’ll be adding a simple animation that shows the electron revolving around the proton, without the electron path and structure labeling in the animation, when you hover over the figure.

Fig. 1: A Hydrogen atom consists of 1 negatively charged electron (e-) that revolves around 1 positively charged proton (P+).

It’s probably a good idea to plan out the animation so that we can tackle it in steps. This is what we’d like to happen: when the reader hovers over the figure we’d like the electron path and labels to fade away and then for the electron to start it’s revolution. Now that we have a plan, let’s get started.

Step 1: Images

There are three images used in this example: the proton, the electron path and labels, and the electron. The proton is static. The electron path and text will fade away as the animation begins. The electron will revolve around the proton.

Step 2: HTML

Next, we’ll code our HTML. Notice that we’ve added an image “hydrogen.png.” This is the regular figure with no animation and this will be served up when styles are not active. We’ll use CSS to hide this image. There are also three empty divs that will be the containers for each of our three images. They’ll be added as background images in the CSS.

<div class="figure">

   <div class="figureImage">

      <div id="hydrogen">

         <img src="images/hydrogen.png" width="150" height="150"
alt="Hydrogen atom" id="hydrogenAtomImage" />

         <div id="proton"></div>

         <div id="pathCharge"></div>

         <div id="electron"></div>

      </div><!-- end #hydrogen -->

   </div><!-- end .figureImage -->

   <div class="figureCaption">

      <p><span>Fig. 1:</span> A Hydrogen atom consists
of 1 negatively charged electron (e-) that revolves around 1 positively
charged proton (P+).</p>

   </div><!-- end .figureCaption -->

</div><!-- end .figure -->

Step 3: Static Figure Styles

Now onto styling our content. We’ve used absolute positioning to layer the three images for our animation and set the main figure image to not display. Other styling for the container and caption are also included here.

.figure {
	width: 275px;
}

.figureImage {
	background-color: #fff;
	border: 1px solid #ccc;
}

#hydrogen {
	display: block;
	height: 150px;
	margin: 20px auto;
	position: relative;
	width: 150px;
}

#hydrogen img#hydrogenAtomImage {
	display: none;
}

#proton {
	background: url('images/proton.png') left top no-repeat;
}

#pathCharge {
	background: url('images/pathCharge.png') left top no-repeat;
}

#electron {
	background: url('images/electron.png') left top no-repeat;
}

#proton, #pathCharge, #electron {
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	height: 150px;
	width: 150px;
}

.figureCaption {
	padding: 0 5px;
}

.figureCaption p {
	font-family: Georgia, serif;
	font-size: 12px;
        font-style: italic;
}

.figureCaption p span {
	font-weight: bold;
}

Step 4: Fade Out Animation

Now, we can start on the first part of our animation. This will create the fade out and fade in animation when we hover over and leave the figure. The opacity is set at 1 initially and changes to .5 on :hover. -webkit-transition-duration: 500ms; sets the fade to occur over 500ms and -webkit-transition-timing-function: linear; keeps the rate of change constant over the duration.

div.figure #pathCharge {
	opacity: 1;
	-webkit-transition: opacity;
	-webkit-transition-timing-function: linear;
	-webkit-transition-duration: 500ms;
}

div.figure:hover #pathCharge{
	opacity: .0;
	-webkit-transition: opacity;
	-webkit-transition-timing-function: linear;
	-webkit-transition-duration: 500ms;
}

Step 5: Electron Revolution

We’ve created an animation for the electron revolution. -webkit-animation-name: revolution; calls the animation named revolution that we’ve defined below. -webkit-animation-iteration-count: infinite; keeps the animation running the whole time the user hovers over the figure. If it was set to 1 then the electron would revolve once and then stop. We’ve also added -webkit-animation-delay: 0.25s; to give the electron path image time to start fading away before this animation begins.

div.figure:hover #electron {
	-webkit-animation-name: revolution;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-timing-function: linear;
	-webkit-animation-duration: 1.25s;
	-webkit-animation-delay: 0.25s;
}	

@-webkit-keyframes revolution {
from {
	-webkit-transform: rotate(0deg);
	}

to {
	-webkit-transform: rotate(360deg);
	}
}

The Finished Product

Fig. 1: A Hydrogen atom consists of 1 negatively charged electron (e-) that revolves around 1 positively charged proton (P+).

This was just a simple example of how CSS animations can be used to enhance figures or diagrams. I’m currently working on two new examples requiring more advanced animations and will post those (with code and explaination) soon. And this was my first tutorial, so hope that you’ve been able to get one or two tidbits from it.

Four years into it I made a huge leap and moved into front-end development (that’s a longer post for another day). With the switch also came a change in my status from teacher back to being a student. As a student, I’ve learned from blogs, books, friends, people I’ve worked with and my own experiments and personal projects. What I haven’t done is engage with the larger web community. The drop in status back to student brought with it the insecurities of thinking everyone knows more than you, even after years of working and studying. And that change was much harder on me than I thought it would be. I was scared to put myself out there and try to add to the discussion.

During a conversation last week, I realized that it’s time for me to get past that feeling of just being a student and push my role forward again. I’m good at what I do and have ideas and thoughts I’d like to share and discuss. To do that, I need to start engaging with others in our field, experimenting more and sharing the results of those experiments.

So this is the starting point. A while back, I toyed with the idea of starting the blog (mainly because I felt like I had too). I worked on some designs but nothing was quite right. I didn’t want to put it up until I had a design I thought was perfect, so I punted. I’d just sit on it for a while and do it later. And I was happy to, because, as I’ve explained, I was a little scared to put myself out there and didn’t really want to do it anyway. Since I’ve finally made the decision to just let go, I decided to make a few quick modifications to a theme so it fits with my current site and start writing. I’ll be tweaking and modifying this design as I go, because it’s not perfect and there are a lot of things I’d like to change. If you see things that are a little out of whack (and there are bound to be some), let me know. I’m glad to finally be joining in and hope I can add a few interesting bits to the interwebs.