CSS Animations, Part 2

Transition Timing Functions, Delays, and Transforms

You can do some really cool things with CSS that I wasn’t sure I would like.

I’m a big time JavaScript lover 1 and so I like to do things programmatically if I can. The perf benefits between CSS and JavaScript are negligible 2.

So in Part 2 of this series, I want to talk about CSS timing functions, delays, and transforms.

Timing Functions

Some of the most basic timing functions, which allow you to determine when a transition starts or stops, are ease, ease-out, and, ease-in-out. These are pretty self-explanatory. But how could you use them?

You could use them to ease on hover an image overlay:

.img-overlay {
  // Set background color of the overlay
  background-color: #000000
  // Define what property we are transitioning
  transition-property: opacity;

.img-overlay:hover {
  // Set the opacity
  opacity: .06;
  // Use the transition-delay transition 
  // to delay when a transition starts
  transition-delay: .4s;
  // Add a transition-timing-function 
  // to ease the transition out on hover
  transition-timing-function: ease-out;

CSS Transforms

These are really cool. I think that they are great in moderation. Some of the transforms can make the user experience fun if not overdone. Let’s take a look at some CSS transforms.

CSS transforms move, rotate, skew, and scale elements on the page relative to their respective containers. The center position is the default position, which starts at 0. For instance, the default is transform-origin: 0;.

This means that when you skew, rotate, scale and element, it will do so relative the the center of the image, button, etc in its container.

You can also use the CSS shorthand property transform to chain together different transforms. It also defaults to the center position on any property you specify.

One of my favorite CSS transforms is the scale() function. It will make the image, button, etc larger relative to its own container. For instance:

.element {
  width: 20px;
  height: 20px;
  // Use the transform scale function 
  // to scale the element outwards
  // 35px from the center
  transform: scale(35);

This will scale the image quite large on the page.

What if we want it to only scale when we hover?

Well, we could add transform to a transition like this:

.img-fluid {
  // Select the img-fluid class and transition
  // The transform property for 500 milliseconds
  transition: transform .5s;

.img-fluid:hover {
  // Transform the img-fluid class with the scale function
  // This will scale the image on hover 1.1px from center
  transform: scale(1.1);

How cool is that?

On to Part 3…

I will be writing about CSS shorthand properties for transition and transform.

  1. I know it’s popular to crap on JavaScript but I really like it. 
  2. As long as you’re not using a heavy library. I’m looking at you, jQuery. 

CSS Animations, Part 1

As you may know, you can animate pretty much anything with JavaScript and jQuery. jQuery makes it easier as it is a pretty neat and simple JavaScript library. No need to use


when you can use

$(#myID).animate({left: '250px'});


You can also animate things with CSS. There are debates on whether CSS animations are faster than JavaScript animations and generally, if you are using vanilla JS and not a heavy library like jQuery, JavaScript animation perf is comparable to CSS.

So How Do You Animate with CSS?

There are basically two ways to animate properties in CSS: transition and transform.

Not all CSS properties are animatable. See this list for animatable properties.

Animating a property with CSS is fairly straight-forward.

Take the animatable property: opacity. We can animate the opacity on an image overlay so that when we hover over it with the mouse, the opacity of the overlay will decrease on the image. You can do that with something like this:

.overlay {
    opacity: 0;
    transition-property: opacity;
    transition-duration: .4s;

.overlay:hover {
    opacity: 2;

Here, we are selecting the overlay class, and adding a base property to that class. Inside of the class selection, we set the opacity to 0 and add the transition with transition-property which selects the property you want to animate and transition-duration which tells the browser how long the animation lasts.

Once you hover over the image, the opacity will be set to 2, and when you switch off of it, it will go back down to 0 since we told the browser by the first CSS declaration we needed to have the opacity return to 0 once the hover state was over.

Not Too Bad, Right?

It is fairly simple, once you get the hang of it. I will be posting more about CSS transitions as I learn them. Meanwhile, here is nice little table of animatable properties by Lea Verou that animate when you hover over them.