CSS Transitions

Transition Property

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. We can change the element in other ways, however. 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 we can change with the addition of new CSS classes. Generically, we can call these property changes transitions.

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

Implementing Transitions

It doesn’t take much syntax to use the transition property to make our arrows move. All we need to do is add one new CSS class to our SCSS (again, Tailwind can do this for us, but we’ll keep using plain CSS):

.slow-transition {
  transition: all 0.5s ease-in-out;
}

The new line here is transition: all 0.5s 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. If we only wanted to transition for changes to background-color or margin, for example, we could limit the change by only including one property. There’s a specific list of what changes can be transitions, but the short of it is that essentially anything where we could list all the steps between values is open. That means that properties that have discrete enumerated values, like display, can’t be transitioned, and we also usually can’t transition to or from magic values like height or width auto. The second element is the amount of time we 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.

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.5 seconds, and use an ease-in and ease-out function to manage the rate of that change.”

Adding New Class to image_pack_tag

If we add the new CSS class to the image_pack_tag call that is displaying the image, then, when we click that button, the transition from down to up and back is animated. While difficult to capture in a screenshot, our animation works!

        <%= image_pack_tag(
              "chevron-right.svg",
              width: 25,
              height: 25,
              class: "inline mb-3 slow-transition",
              "data-css-flip-target": "elementToChange"
            ) %>

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. Some will like this effect, while others may think it looks like a bug. If we’d like, we could 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.

Note: To view these changes, no login is required in the app.

The application now would look something like this: