Introduction to CSS3 Animation

In the early days of the web, animation was handled through techniques like Flash (now known as Animate CC) or even the venerable animated GIF.

Introduction to CSS3 Animation

Introduction to CSS3 Animation

Although quite different technologically speaking, both allowed designers to express their creativity through movement. Both also had their limitations. GIFs are somewhat limited in the scope of what they can do and Flash requires a plugin that isn’t supported by mobile devices. In subsequent years, newer technologies like jQuery have come along to harness the power of JavaScript to create animations. But JavaScript can get quite complex – especially for those of us who aren’t hardcore programmers. With that, it was time for a simpler next-gen technique to come forward: CSS3 animation.

Let’s discover more about what CSS3 animation is with a look at its strengths, potential weaknesses and how you can implement it in your own website.

CSS3 Animation: Simple, Powerful and Fully-Integrated

CSS3, in general, aimed to put powerful features in the hands designers – animation being one component.

Among the many benefits of CSS3 animation:

No plugins required

CSS3 animations can be rendered in any modern web browser. Its effects can be viewed on mobile and desktop devices alike. And, through the use of responsive design techniques, animation can be further optimized for viewing on small screens.

Super speedy

CSS itself is fast, and CSS3 animations are no exception. Using the right techniques, you can create animations which aren’t dependent on large external files or plugins. Today’s modern hardware can easily translate CSS into beautiful animation in no time.

Wide variety of uses

It used to be that animation had to be its own separate entity (like a Flash or image file) on a web page. CSS3 changed that with the ability to place animations on virtually any element of your design. Sure, you can animate an image. But you can also use this technique to enhance design elements like links, headings and even entire pages.

Easy to implement

If you already know a bit of CSS, you’ll become adept at creating simple animations in minutes. Plus, many text editors offer code hints that will help you along the way.

With the many strengths of CSS3 animation, there are also a couple of items that may be considered weaknesses, depending on your situation:

They’re geared towards simple animation

If you’re expecting CSS3 animation to duplicate everything Flash did, you’re out of luck. To do something really complex, you’ll might need to enlist the help of JavaScript.

No or limited support in older browsers

While we’re (thankfully) getting farther and farther away from the beast that was Internet Explorer, CSS3 animation is unsupported in anything older than IE 10. Since animation is often for decorative purposes, this lack of support may not be such a huge deal.

Here’s a video from DevTips that explains the basics of CSS transitions and animations:

Creating CSS3 Animation

Now that we know a little more about what CSS3 Animation is, let’s take a look at some basic code structure and examples of how you can add some movement to your own site.

Code Structure

First thing’s first, you’ll need to pick an element on your web page to apply animation effects to. This could be an HTML element such as <h1>, <a>, <p> or a specific CSS class or ID.

Whatever it is you want to animate will require you to add the CSS animation property. Within that property, we’ll give our animation a name using animation-name. That tells your CSS code which @keyframes to look for.

@keyframes are the instructions which tell your animation where to start, where to end and what to do in-between. Don’t worry – we’ll give a more detailed look below.

Beyond defining a name, you’ll also want to get familiar with these other animation properties:

  • animation-delay – The time delay (in s or ms ) before the start of the animation. For example, you might want to delay the start of an animation by two seconds. In that case, you’d write: animation-delay: 2s
  • animation-direction – Allows you to play the animation in normal, reverse or alternating between the two in cycles.
  • animation-duration – The length of time (in s or ms ) your animation will take to complete one cycle.
  • animation-iteration-count – The number of cycles your animation will run.
  • animation-play-state – Determines if an animation is currently paused or running.
  • animation-timing-function – Defines how your animation will transition through its @keyframes. Values include: ease, ease-in, ease-out, ease-in-out, linear, step-start and step-end.
  • animation-fill-mode – Sets how styles are applied to your animated element both before and after it runs.

You’ll want to study the finer points of each of these properties to see how they affect your animations.

An Example of CSS3 Animation

In this example, we’ll bring some simple animation to a paragraph of text. The text will “rise up” and fade into view from the bottom of its parent container.

The CSS:

/* The Container Element*/

.container {

position: relative;

width: 100%;

height: 300px;

border: 1px solid #CCCCCC;

overflow: hidden; /* This keeps the page width in tact. */

}
/* Animate the Paragraph Contents */
p {

animation-name: textRise; /* The @keyframes We'll Reference Below */

animation-duration: 2s;

animation-delay: 1s;

animation-timing-function: ease-in;

text-align: center;

font-size: 18px;

}
/* The @keyframes for our Animation */
@keyframes textRise {

/* Our Animation's Starting Point */

from {

margin-top: 100%;

opacity: .25;

}
 

/* How Our Animation Ends */
to {

margin-top: 0;

opacity: 1;

}

The HTML:

<div class="container">

<p>I'm very animated!</p>

</div>

The Result:

See the Pen ggjxjB by Brittany Jezouit (@brittanyjezouit) on CodePen.

This is just a simple example of how an animation can work. There’s a lot more we can do. For example, we can add more @keyframes using percentages:

50% {

margin-top: 50%;

opacity: .75;

font-size: 250%;

}

The extra @keyframe in this example would, once the animation has run halfway through (50%), enlarge the text and increase its opacity.

The Result:

See the Pen EZeKob by Eric Karkovack (@karks88) on CodePen.

Of course, you can go on from there to experiment with any number of different effects. Once you have a grasp of the basics, you’ll find that CSS3 animation can add some personality and flair to your website.

Add Animation the Easy Way

Even if you’re not a CSS expert, you can still implement CSS3 animation. Here are some great resources to check out:

Animation CSS3 Effects – Visual Composer

Introduction to CSS3 Animation

If you’re already using Visual Composer on your WordPress website to build pages, Animation CSS3 Effects adds the ability to use animation with no code necessary. There are over 60 available effects and you can change settings for delay, duration and more.

CSS3 Animations

Introduction to CSS3 Animation

With 10+ code snippets for cutting and pasting, CSS3 Animations will provide you with a solid starting point. You can easily tweak the code to adjust each animation effect.

HoverMe

Introduction to CSS3 Animation

HoverMe enables CSS3 animations as users hover over images and buttons. Also included are animated page loading effects.

Let’s get moving

CSS3 animations provide an easy and efficient means to spice up your website. When used properly, it can both call attention to important content and also improve the user experience (UX).

If you’re just starting out, it’s best to start small. Create a simple animation, like the examples above. From there, you can build upon what you’ve already learned to make something truly unique.

Featured image background: Subtropica.