We need to include the elements we want to animate inside our ReactCSSTransitionGroup component. Every time we add an item to our Todo list, we can see that our special classes (.todo-enter and .todo-enter-active) are being injected for a second to start our animation:

And if we remove an item, we will see the .todo-leave and .todo-leave-active classes for a second:

As you can see, using ReactCSSTransitionGroup helps us to handle the states of our animations. You can use this to create better animations in your React application.