Choose any widget, section, or column and head over to Advanced Tab. select the Keyframes Animator and enable the animator.
Now tweak the settings to your liking, set the number of iterations (repetitions), or set to loop as in the examples below. Then you can use the name of the animation anywhere you want using CSS or have it run automatically on the parent element. Below you will find a repeater that allows you to then create the different keyframes of your animation. So, for example, if you set your animation time to 10 seconds and have 3 keyframes: 0% 50% 100% – then the 0% will represent the beginning of your animation. 50% will happen after 5 seconds and by 10 seconds the CSS defined in the 100% keyframe will execute.
This feature requires some knowledge of CSS but once you get the hang of it you will see that it is straightforward, and will save you a lot of time if you want to achieve this type of animation.
You can reuse the animation as long as it loads on the page, so if you want all pages to use a certain animation, consider adding that keyframes set up in the footer or header of the website, so it will be present when our CSS references it. Check out the bottom of the page for an example.
example: name of your animation: myAnimation.
CSS: selector h2 {animate: myAnimation;}
You can add more CSS values to your CSS like animation time and iteration count and it will override what is predefined in the Keyframe Animator. simple as that.
Looking for a lifetime deal?
