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 ...