As mentioned by @Yogi:

Changing transition-duration: 5s; to animation-duration: 5s; seems to work.

In general, transition-duration is used between two distinct states (start/end), while animation-duration involves a sequence of keyframes. When you're trying to trigger the animation on click, the use of animation-duration should be used.