Transition

Introduction

How can we animate SVGs? To answer this question, let’s dive into another important topic, transition. Transition is used to animate the changes from one state to another state. It changes the property of DOM elements from the start state to the end state within a specified duration. It creates the look and feels of an animation.

Example

Let’s look at an example to understand the concept of the transition. We want to change the color of the rectangle from Irish blue to Neon carrot.

Explanation

Let’s understand the transition of color in the rectangle by looking into the following explanation.

Line 14-16: We have changed the color of the rectangle by using the transition().duration(2000) function. duration(2000) will make the transition smooth as it will take 2000ms to go from the start to the end state. The transition starts as soon as we hit the Run button. We can delay the start of the transition process by using the following code.

.transition()
.delay(500)

Here, 500 means that the transition process will start after 500ms.