We can now animate the arrow using CSS transitions. Basically, we have to tell the browser that the
transform
property needs to be animated; the necessary SASS code is a bit longer than expected because Compass is not yet able to prefix the
transition
property and its value (https://github.com/chriseppstein/compass/issues/289), so we have to do it manually:
-webkit-transition: -webkit-transform 0.5s; -moz-transition: -moz-transform 0.5s; -ms-transition: -ms-transform 0.5s; -o-transition: -o-transform 0.5s; transition: transform 0.5s;
After we have placed these CSS instructions inside the div[data-arrow]
selector, we'll notice that if we change the data-percentage
property, for example, by using Chrome and its development console, the arrow responds with a smooth animation.