CSS Transitions

When we add the new CSS class to our elements in the previous example, the transform property changes the orientation of the element on the screen. However, there are other ways we can change the element. Our new classes could specify a background color, change the margin, add a border, and so on. There are many properties of a DOM element that can change with the addition of new CSS classes. Generically, we can call these property changes transitions.

CSS provides what you can think of as a meta-property called transition. The transition property allows you to change the behavior of the CSS element when one of its display properties changes. The default behavior is that the property changes instantly.

Implementing trasitions

It doesn’t take much syntax to use the transition property to make our arrows; all we need to do is add one line to the definition of the background-arrow CSS class in application.scss:

.background-arrow {
  background-image: url("../images/arrow.svg");
  width: 25px;
  height: 25px;
  transition: all 0.3s ease-in-out;
  // and so on
}

The new line here is transition: all 0.3s ease-in-out;, which specifies that we want properties to transition.

The syntax of the transition property has up to four elements:

• The first is the name of the property being observed, or the special words all or none. The rotation angle, strictly speaking, doesn’t have a property, so it can only be captured using all. But if you only wanted to transition on changes to background-color or margin for example, you could limit the change by only including one property. There’s a specific list of what can be categorized as a transition, but basically, any change where all the steps between the values can be listed is fair game. That means that properties that have discrete enumerated values, like display, can’t be transitioned, and you also usually can’t transition to or from magic values like height or width auto.
• The second element is the amount of time you want the transition to take, which is defined either in seconds (s) or milliseconds (ms).
• The third element is a timing function that determines the rate at which the value changes across the transition. The default is linear, meaning the rate is the same for the entire time. Our code uses ease-in-out, which slows the rate of change at the beginning and end of the transition, and speeds it up across the middle.

There are other timing functions, should you want to investigate.

• The last element, which our code doesn’t have, is a delay—the amount of time to wait before starting the transitions.

What our code is saying is that when any property in our DOM element changes, spread that change out over 0.3 seconds, and use an ease in and ease out function to manage the rate of that change.

And just like that, when we click those little buttons, the transition from down to up and back is animated. This effect is a little hard to get across in a screen shot, but trust me on this.

Animation Side Effects
A fun side effect of the current implementation is that the initial transition from the basic image pointing right to the initial down state might also be animated, leading to all the arrows turning down at page load. I find this kind of charming, but you could also get rid of it by either starting with a real down pointing image or only adding the transition to the DOM element after the page has loaded.

Transitions don’t have to be paired with transformations. Any change in values can be transitioned. A common use of this is to change a value on the hover pseudo-element. For example, let’s add this definition: