Animations Pt. 2

I learned a ton about creating animations over the last two days.

First, here's the fruit of my labor - the animation of our client's logo:

While imperfect, I'm happy with how it turned out. It was a learning experience, and in that regard it was a total success. I've learned the fundamentals of animating html elements (simple structural elements elements like <p>s but also <img>s and <svg>s) and have also seen some of the wild possibilities that exist to create attractive, compelling, and beautiful experiences for users and viewers.

This was pretty simple to put together. Here's the code that represents the horizontal left-right movement of the 'U';

#u {
  position: relative;
  margin:0px;
  padding:0px;
  animation: u-xAxis 5s 1 forwards;
}

@keyframes u-xAxis {
  0% {
    transform: translateX(.8em);
   }
  100%{
    transform: translateX(0em);
  }
}

The first code block is standard css. We're interested in the animation value. Here we specify properties of the animation including the animation name (the name of the keyframes that define the time values for our animation sequence), the duration, number of repeats, and the direction.

There are other options too, but those are the ones I used in this project.

I think of the keyframes as the engine of the animation. It defines the time intervals over which elements change. And it's easy. Well, the theory is easy. Defining rulesets to achieve your vision - less easy.

What I've got going here is that at 0% elapsed-time (before any time has passed), I'd like to apply the translateX css property to any elements that is assigned this ruleset. And at 100% elapsed-time (at the end) I want those elements to have the property assigned at that point. You can set intervals at any point along the way and even combine them to achieve the effects you want.

There's a sea of creative, imaginative css animations out there. Explore, learn, and be inspired!