High CPU usage when trying to animate a line

Nobody has claimed this yet.

**mapbox-gl-js version**: 0.53.1

**browser**: Chrome

### Steps to Trigger Behavior

1. See the code below - animate a line using `setPaintProperty` in an interval function.

### Link to Demonstration

The following code is used to animate the direction of a line:
https://stackoverflow.com/questions/43057469/dashed-line-animations-in-mapbox-gl-js
This is related somewhat to this issue I've opened in the past: #8140
It might also be related to #8243, and I've reported it also at: #7235
An example of a running code can be found here:
https://jsfiddle.net/2mws8y3q/

When the above tab is open in chrome the CPU starts working and never stops which causes severe performance issues on the site. It's not noticeable on strong machines but is when using old PCs or weak mobile devices.
More info can be found here:
IsraelHikingMap/Site#1012
I basically would like to show the user the direction of a route, but without the animation it's hard as direction arrow heads have their drawback, which is described here:
IsraelHikingMap/Site#1030

Let me know how I can help.
Keep up the good work!

### Expected Behavior
Animation should not use that much CPU that will cause the site to be sluggish.

### Actual Behavior
Animation uses a lot of CPU and causes the site to be sluggish.

Reproduce the animation from the linked JSFiddle and Stack Overflow example in Chrome, focusing on repeated setPaintProperty calls inside the interval. Profile CPU usage while the line animates and compare it with the expected behavior of avoiding severe site sluggishness.

Written by the indexing model from the issue text.