CSS Animations, Part 2 | Tiffany R. White Blog

CSS Animations, Part 2

Reading time: 7 mins

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.

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

  2. As long as you’re not using a heavy library. I’m looking at you, jQuery.  2


Share

No Ads. No Sponsored Content. Ever.

I've decided that I no longer want to have sponsored posts on this blog. I also, though as tempting as it may sound, don't want ads; even if I got big enough for Carbon ads I don't want them. I want to post free, engaging content for beginning/junior devs. This means that I won't have Setapp posts or affiliates on this blog, though I will keep them on the Uses page. If you enjoy the content, buy me a coffee. Just click the button below.




Webmentions 0

No webmentions were found.

Newsletter