Create CSS3 Animations With No Mouse Interactions

This particular article falls under the category of Cool Things People Do with CSS3. In particular, we are going to look at CSS3 animations that do not require hovers or clicks with the mouse. For me, at least, this is something new that I’m just discovering. The demo for this animation technique is our solar system displayed in CSS3 and HTML. Here’s the demo.

As you can see from the demo, the CSS3 uses border radius and animation techniques. It’s best viewed in Safari and Chrome. In Firefox and Internet Explorer, the animations don’t appear to work, but the hover effects over the names of the planets work fine. The original code was written by Alex Giron. The first half of this article discusses Alex’s CSS3 code and the second half of the article takes a look at the different CSS3 animation properties. Let’s start with the solar system code.

Show Me the CSS3 Code!

For the border radius effect, to make the solar system appear circular, Alex wrote this code:

ul.solarsystem li.sun {
      width: 40px;
      height: 40px;
      -webkit-border-radius: 20px;
      -moz-border-radius: 20px;
      border-radius: 20px;
      }

He then tweaked this code for each planet. The animations and transforms are a bit more complicated:

ul.solarsystem li {
      -webkit-animation-iteration-count:infinite;
      -webkit-animation-timing-function:linear;

      -webkit-animation-name:orbit;

      }

ul.solarsystem li.earth span {
      -webkit-animation-iteration-count:infinite;

      -webkit-animation-timing-function:linear;
      -webkit-animation-name:moon;
       }

      ul.solarsystem li.mercury {-webkit-animation-duration:5s;}
      ul.solarsystem li.venus {-webkit-animation-duration:8s;}
      ul.solarsystem li.earth {-webkit-animation-duration:12s;}
      ul.solarsystem li.earth span {-webkit-animation-duration:2s;}
      ul.solarsystem li.mars {-webkit-animation-duration:20s;}
      ul.solarsystem li.asteroids_meteorids {-webkit-animation-duration:50s;}
      ul.solarsystem li.jupiter {-webkit-animation-duration:30s;}
      ul.solarsystem li.saturn {-webkit-animation-duration:60s;}
      ul.solarsystem li.uranus {-webkit-animation-duration:70s;}
      ul.solarsystem li.neptune {-webkit-animation-duration:100s;}
      ul.solarsystem li.pluto {-webkit-animation-duration:120s;}

@-webkit-keyframes orbit {
      from { -webkit-transform:rotate(0deg) }
      to { -webkit-transform:rotate(360deg) }

HTMLgoodies has covered much of this code in the past, except for the animation-iteration property. Let’s look a little closer at this.

The W3C defines the animation-iteration property as, “…the number of times an animation cycle is played. The default value is one, meaning the animation will play from beginning to end once. A value of ‘infinite’ will cause the animation to repeat forever. Non-integer numbers will cause the animation to end part-way through a cycle. Negative values for ‘animation-iteration-count’ are treated as zero. This property is often used with an ‘animation-direction’ value of ‘alternate’, which will cause the animation to play in reverse on alternate cycles.”

In the Solar System demo, the count is infinite, so that the planets will orbit the sun continuously. It is interesting to note that CSS3 is now starting to cover more ground than just static layouts, hover and click effects. In the past, the many CSS3 examples that I’ve seen use clever means to display animation-type effects, but only on hover or clicks. I’m now discovering that CSS3 is diving into animation effects that do not require hovers or clicks. This could prove very interesting in terms of creating animated web content that does not require Flash.

The W3C has working drafts for several animation properties, including:

• animation-name
• animation-duration
• animation-timing-function
• animation-iteration-count
• animation-direction
• animation-play-state
• animation-delay
• animation

The remainder of this article will define these properties as dictated by the W3C:

animation-name

The ‘animation-name’ property defines a list of animations that apply. Each name is used to select the keyframe at-rule that provides the property values for the animation. If the name does not match any keyframe at-rule, there are no properties to be animated and the animation will not execute. Furthermore, if the animation name is ‘none’ then there will be no animation. This can be used to override any animations coming from the cascade.

animation-duration

The ‘animation-duration’ property defines the length of time that an animation takes to complete one cycle.

animation-timing-function

The ‘animation-timing-function’ property describes how the animation will progress over one cycle of its duration. It is related to the ‘transition-timing-function’ property.

animation-direction

The ‘animation-direction’ property defines whether or not the animation should play in reverse on alternate cycles. If ‘alternate’ is specified, the animation cycle iterations that are odd counts are played in the normal direction, and the animation cycle iterations that are even counts are played in a reverse direction. When an animation is played in reverse the timing functions are also reversed. For example, when played in reverse an ease-in animation would appear to be an ease-out animation.

animation-play-state

The W3C is considering removing ‘animation-play-state’ since its behaviour can be replicated using other techniques. For example, by querying the computed style, removing the animation and then setting style. As it stands now, the ‘animation-play-state’ property defines whether the animation is running or paused. A running animation can be paused by setting this property to ‘paused’. To continue running a paused animation, this property can be set to ‘running’. A paused animation will continue to display the current value of the animation in a static state, as if the time of the animation is constant. When a paused animation is resumed, it restarts from the current value, not necessarily from the beginning of the animation.

animation-delay

The ‘animation-delay’ property defines when the animation will start. It allows an animation to begin execution some time after it is applied. An ‘animation-delay’ value of ‘0’ means the animation will execute as soon as it is applied. Otherwise, the value specifies an offset from the moment the animation is applied, and the animation will delay execution by that offset.

If the value for ‘animation-delay’ is a negative time offset then the animation will execute the moment it is applied, but will appear to have begun execution at the specified offset. That is, the animation will appear to begin part-way through its play cycle. In the case where an animation has implied starting values and a negative ‘animation-delay’, the starting values are taken from the moment the animation is applied.

animation

The ‘animation’ shorthand property combines six of the animation properties into a single property.

I’ll keep my eyes open for more examples and code on how to use the CSS3 animation property. I’m sure many of you will develop some very interesting code out of it.