To begin with, it is worth knowing that animations and transitions are not the same thing. Transitions in CSS are time-centric and largely depend on some variable properties in terms of the specific time period over which they change. They are only associated with a single element. Animations on the other hand have little to do with a cyclic period of time. As soon as we apply them, they start running.
Engineering the CSS Transitions
We need to make use of getComputedStyle and getPropertyValue right at the instant we want a pause. Then the CSS values of the properties will be assigned as per the values we have just fetched. Let us inject some more clarity with this example :
Now, we will reproduce the above technique even when there are more complex transitions to bring about.
Making use of the Callback Functions
The DOM events of JS can prove to be extremely handy when we are playing around with CSS transitions and animations. These may include events of the likes of animationEnd, animationIteration and so on. For transitions, we have transitionEnd, etc. the names make it clear what action they trigger.
Let us create an animation and transition effect by creating a heart shape and then interrupt its animation when it is hovered over:
Playing Around with CSS Animations
Now, we saw some events for animations like animationStart, animationEnd and so on. But you would need to branch out of your comfort zone to alter the animation right in the middle of the animation taking place.
For the same, the animation-play-state property proves to be handy and helps you to pause the animation as and when you want. Make the following change in your JS:
What are the Current Values of CSS Animation
Finding out the same is highly consequential on the overall exercise. Here are some code snippets that can be made use of when obtaining and altering CSS animation midway is on the agenda:
Practically Altering the Animation
Now, we will determine the closest keyframe to the percentage we have at present:
And now comes changing the percentage into the circle’s degree. Following that, the new rles have to be charted out, based on which variables we have fetched so far.
The current percent setInterval will then be reset. Cross browser compatibility has also be taken into account meanwhile: