How to create an infinitely looping animation?

[Andreas Andrews]

Hi all,

I'm going to add a bit of extra background, to be as informative and perhaps helpful as possible, however the TLDR of my question is this:

How can I make a background image (or two) ease in and out (ie. move up and down) continuously either with Elementor or alternatively adding some custom CSS or just whatever solution is most elegant and the least bloated. I don't mind getting my hands a little bit dirty with coding it in, if that's the best way. My Hello child-theme for Elementor Pro is all set up and ready to go, and there are various ways to add custom CSS or other code with ease and following best practices.

Here is an example of the original code and therefore the animation effect I'm trying to replicate:

.cloudline1, .cloudline2{

position: absolute;

bottom: 0px;

width: 100%;

background-position: center;

background-repeat: repeat-x;

pointer-events: none;

}

.cloudline1{

background-image: url('images/white-pillows.png') !important;

animation: cloudbob1 2s ease-in-out infinite;

-webkit-animation: cloudbob1 2s ease-in-out infinite;

height:274px;

}

.cloudline2{

background-image: url('images/green-pillows.png') !important;

opacity: .8;

animation: cloudbob2 2s ease-in-out infinite;

-webkit-animation: cloudbob2 2s ease-in-out infinite;

height:216px;

bottom:60px;

}

.cloud-box {

display: block;

height: 274px;

background-color: #68EED0 !important;

box-shadow: none !important;

}

---

To explain the code, there are two background images, infinitely repeating on the x axis which appear pretty much above each other, but whilst one animates upwards, the other animates downwards and each second they swap and go the other direction which creates a smooth and simple undulation of the images (a line of clouds) on the page.

Now for the back story:

- I'm replicating an entire website,  and moving it away from Divi + outdated custom theme over to Elementor Pro with Hello theme, for various reasons.

- Using the entrance animation isn't quite producing the desired effect, and the way I've set it up doesn't look too elegant during the animation.

- I'm happy to use a plugin, but my first port of call in this case has been reading all the documentation I can find, and trawling a few posts, and watching a few tutorials before reaching out for help firstly, however I'll explore the various plugin options that add the desired functionality next to see if I can deem some of them to have good quality code that is up to date.

- I'm experimenting by adding an image, finding its CSS class and applying custom CSS code based on the original code that made the animation work on the original website or more specifically using "selector" in order to apply the custom code only to the duplicate page on the staging server, so that as it stands no code will be accidentally deployed to the live site and definitely not indexed by Google unless it's approved and working.

If you want more information, details, examples or access to view the live or staging site, or related questions to help you with your own projects or curiosity don't hesitate to ask.

Thank you,

Andreas

and...@andreasandrews.com

[Andreas Andrews]

**Resolved** I made this work simply by adding code to an HTML widget in Elementor, then setting the 'widget gap' to 'none' to make it work seamlessly. To help with adding it onto the homepage I saved the section as a template which I added/duplicated in the relevant places.

Elementor support also confirmed for me there is no way to do this natively without using custom code, hence why I used the HTML widget which allows not just HTML but also CSS and even shortcodes and JavaScript to be added there.

I have the niggling feeling I should refactor the code, however I've been told the code looks fine so I'll leave that for another time.

A.